# 3DStreet and Streetmix Tutorial

## Introduction

3DStreet and Streetmix have a truly symbiotic relationship. When combined, you can use these platforms to create compelling and accurate 3D visualizations of streets in a matter of seconds. This tutorial will show you how to get started!

The tutorial is broken up into three sections:
- **Building Your Street Using Streetmix** teaches you the basics of how to use Streetmix.
- **Viewing Your Streetmix Street in 3D Using 3DStreet** showcases how simple it is to import your Streetmix street into 3DStreet.
- **Final Thoughts** discusses the relationship between 3DStreet and Streetmix at a high level.

## Building Your Street Using Streetmix

Streetmix is an interactive web app that makes street design intuitive and user-friendly. To get started, open up a web browser and navigate to [https://streetmix.net/](https://streetmix.net/). You should see a 2D visualization of a city street. There are a few simple ways to make this scene your own. In the bottom part of your screen, there are various entities available to add to your street.

![image](https://user-images.githubusercontent.com/39531367/141915497-54f8fa4a-7393-4a7b-85a7-8e2ce8f754a6.png)

As we can see above, Streetmix includes a Wayfinding Sign. Let's start by adding this to our scene. To do this, we can simply drag and drop the segment into our street.

![image](https://user-images.githubusercontent.com/39531367/141921622-8416595b-89d2-4058-8d8b-384bf47db9dc.png)

Streetmix also allows you to edit segments that have already been added to your street. Each segment has various properties that can be edited to meet the needs of your street. To edit a segment, simply use the widget that appears when you hover your mouse above a given segment. The image on the right showcases how to change the orientation of cars in the parking lane. On the left, we demonstrate how to remove segments. 

Removing Entities          |  Changing Parked Vehicle Orientation
:-------------------------:|:-------------------------:
![image](https://user-images.githubusercontent.com/39531367/141921901-c3057289-9e3f-41f8-b5c5-efb8f7dfced6.png)  |  ![image](https://user-images.githubusercontent.com/39531367/142090051-8dcf4b9b-ee7e-48d1-acb6-044b0a3b247d.png)

Keep experimenting with your Streetmix street until you find a street layout that you love. Then, proceed to the next section of this tutorial!

## Viewing your Streetmix street in 3D using 3DStreet - Just Add "3d"!

At 3DStreet, we have worked hard to streamline the process of importing your Streetmix street into 3DStreet.

To bring any Streetmix scene into 3DStreet, add `3d` to the end of streetmix.net domain name in the URL bar of your browser to view your street using 3DStreet. (change streetmix.net to streetmix3d.net) For instance, the Streetmix URL `https://streetmix.net/kfarr/65/temp-barricade` can be changed to `https://streetmix3d.net/kfarr/65/temp-barricade` to view your street in 3D.

Enjoy your Streetmix street in 3D! Feel free to share your street with friends and family. If you would like to make instant changes to your work, simply edit your street in Streetmix. Then, you can reload your 3DStreet page to see your edits applied. 

## Final Thoughts

3DStreet users often rely on Streetmix to create their street layouts. Thus, it is important that new users have a comprehensive guide for how to use these tools together. If you have any questions, comments, or concerns regarding how to use 3DStreet and Streetmix, do not hesitate to reach out to [@srothst1](https://github.com/srothst1) or [@kfarr](https://github.com/kfarr).