-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert "update docs to prep for new video"
This reverts commit fd653a9.
- Loading branch information
Rahul Gupta
authored and
Rahul Gupta
committed
Aug 22, 2024
1 parent
fd653a9
commit d2a33e2
Showing
7 changed files
with
163 additions
and
22 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"label": "Tutorial: Use Streetmix to create a 3DStreet scene", | ||
"position": 4, | ||
"link": { | ||
"type": "generated-index", | ||
"description": "A step-by-step tutorial on how to create and customize a street in Streetmix and use it to create a new 3DStreet scene." | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
--- | ||
sidebar_position: 5 | ||
--- | ||
|
||
# Congratulations! | ||
|
||
Now that you have a 3DStreet scene, the possibilities are endless. You can: | ||
* Update your street using 3DStreet Editor | ||
* Save and share the 3DStreet JSON file with your friends | ||
* Export to a glTF model to render scene in other editors | ||
* Capture screenshots and share with friends | ||
* Share on social media like Twitter, Instagram, Facebook, and Mastadon | ||
|
||
![Animated gif screenshot of a user loading a Streetmix street from 3DStreet Editor](/img/docs/tutorials/3dstreet-screen-capture-social-share.gif) | ||
|
||
Find us on [Twitter](https://twitter.com/3dstreetapp) and share your best 3DStreet scenes. |
30 changes: 30 additions & 0 deletions
30
docs/tutorial-streetmix-to-3dstreet/convert-streetmix-street-to-3dstreet-scene.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
--- | ||
sidebar_position: 4 | ||
--- | ||
|
||
# Convert Streetmix street to 3DStreet scene | ||
|
||
Now that you have a beautiful Streetmix scene, it's time to convert it into a 3D masterpiece. There are | ||
|
||
|
||
### URL shortcut to instantly convert Streetmix to 3DStreet | ||
|
||
The fastest way to convert a Streetmix scene open in your browser is to insert "3D" in the URL as follows: | ||
* Make sure you are logged into Streetmix and have saved your street | ||
* Click on the URL bar of your browser and insert "3d" after "streetmix" but before ".net" ![Animated gif screenshot of a user modifying streetmix.net url to streetmix3d.net in a browser URL bar](/img/docs/tutorials/streetmix-net-to-streetmix3d-net-to-3dstreet-url-edit.gif) | ||
|
||
* Press `enter` | ||
* 3DStreet will automatically import this Streetmix street into a new 3D scene | ||
|
||
### Load Streetmix from 3DStreet Editor | ||
|
||
You can also load a Streetmix street from inside 3DStreet Editor as follows: | ||
1. Copy and paste your Streetmix URL | ||
2. Go to [3DStreet Editor](https://3dstreet.app) | ||
3. In right top corner click Load | ||
4. Click Import Streetmix | ||
5. Paste your Streetmix URL in the popup box | ||
6. Press `enter` | ||
7. Your Streetmix street will now import into 3D Street! | ||
|
||
![Animated gif screenshot of a user loading a Streetmix street from 3DStreet Editor](/img/docs/tutorials/load-streetmix-in-3dstreet-editor.gif) |
21 changes: 21 additions & 0 deletions
21
docs/tutorial-streetmix-to-3dstreet/create-a-streetmix-account.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
--- | ||
sidebar_position: 2 | ||
--- | ||
|
||
# Creating a Streetmix Account | ||
|
||
[**Streetmix**](https://streetmix.net) is a collaborative civic engagement platform for urban design that allows you to design, remix, and share your neighborhood street. | ||
|
||
### Why do you need a Streetmix account? | ||
Currently 3DStreet does not operate independently, it requires you to load a file from Streetmix. In order for you to save a street in Streetmix, you must create an account to acquire a link for a saved street. (If you already have a Streetmix account, [continue to the next step](/docs/tutorial-streetmix-to-3dstreet/create-or-remix-a-street-in-streetmix).) | ||
|
||
### How to create a Streetmix account | ||
There are two ways to create a Streetmix account: | ||
1. Enter your email which prompts a confirmation. From here check your email and follow instructions. | ||
or | ||
2. Sign in with your Google account. | ||
|
||
![Screenshot of the layers panel in 3DStreet Editor.](/img/docs/tutorials/streetmix-create-account.gif) | ||
|
||
### Let the fun begin | ||
Now that you have an account, let's get creative and make a street of your own [in the next step](/docs/tutorial-streetmix-to-3dstreet/create-or-remix-a-street-in-streetmix). |
56 changes: 56 additions & 0 deletions
56
docs/tutorial-streetmix-to-3dstreet/create-or-remix-a-street-in-streetmix.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
--- | ||
sidebar_position: 3 | ||
--- | ||
|
||
# Create or Remix a Street in Streetmix | ||
|
||
![Screenshot of the layers panel in 3DStreet Editor.](/img/docs/tutorials/streetmix-street-example.jpg) | ||
|
||
|
||
## What is remixing? | ||
|
||
A Streetmix street is a cross-section visualization of a street. Remixing is the process of copying an existing street and making your own changes, or "remixing." Other users can save and send any other public Streetmix street to be remixed or altered to create a new draft of a street scene. | ||
|
||
## Quick tips on how to make a Streetmix street | ||
|
||
|
||
### Toolbar palette | ||
|
||
Use the toolbar to select components to add to your street like lanes, people, and objects. | ||
|
||
![Animated gif screenshot of Streetmix toolbar](/img/docs/tutorials/streetmix-toolbar.gif) | ||
|
||
|
||
### Drag and drop | ||
|
||
Drag and drop components with mouse to add or take away from your streets. | ||
|
||
![Animated gif screenshot of dragging and dropping a toolbar item into a Streetmix street](/img/docs/tutorials/streetmix-drag-and-drop.gif) | ||
|
||
|
||
### Swap | ||
|
||
Relocate components by dragging with the cursor horizontally to desired location on the street lineup. | ||
|
||
![Animated gif screenshot of swapping street segments in Streetmix](/img/docs/tutorials/streetmix-swap.gif) | ||
|
||
### Customize | ||
|
||
Many components have a variety of options by choosing available variations or swatches to customize the selection. | ||
|
||
![Animated gif screenshot of selecting variants in the segment swatch popup menu in Streetmix](/img/docs/tutorials/streetmix-swatches.gif) | ||
|
||
### Resize Segments | ||
|
||
Resize component segments by using arrows or entering manually by clicking and entering a numerical amount with keyboard. | ||
|
||
![Animated gif screenshot of resizing a street segment in Streetmix](/img/docs/tutorials/streetmix-resize.gif) | ||
|
||
### Try it out! | ||
|
||
Here are some links to example streets to remix to start with. Just click to follow any of the links below to start remixing the street: | ||
* https://streetmix.net/kfarr/82/16th-st-harrison-st-sf-ca | ||
* https://streetmix.net/raceman95/31/example-40-remix | ||
* https://streetmix.net/tony/1/washington-boulevard | ||
* https://streetmix.net/eli.pousson/5/harford-road-south-of-gorsuch-avenue | ||
* https://streetmix.net/ThatErikJensen/2/wisconsin-ave-brt-interim |
32 changes: 32 additions & 0 deletions
32
docs/tutorial-streetmix-to-3dstreet/overview-streetmix-3dstreet.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
--- | ||
sidebar_position: 1 | ||
--- | ||
|
||
# Overview | ||
|
||
## Tutorial: Use Streetmix to create a 3DStreet scene | ||
|
||
Welcome to the tutorial "Use Streetmix to create a 3DStreet scene." This tutorial will guide you through the process of creating a street in [Streetmix](https://streetmix.net), importing it into 3DStreet, and then creating a 3D perspective image of your street that you can share with others. | ||
|
||
This tutorial takes most people at least 15 minutes to complete if you are getting started for the first time and do not already have a Streetmix account or experience using 3DStreet. | ||
|
||
To complete this tutorial you will need a desktop browser on a recent Windows, Mac, or Linux computer with a standard high-speed Internet connection, we recommend at least 500 kilobytes per second or higher. Unfortunately, mobile devices and low-power computing devices such as Google Chromebooks are not supported at this time. | ||
|
||
## What are we making? | ||
|
||
When you finish this tutorial, you will have a beautiful 3D scene of your Streetmix street inside of the 3DStreet Editor. This tutorial will guide you through creating a Streetmix account, signing into that account, creating a street, and then importing that street into 3DStreet. | ||
|
||
## What is Streetmix and how is it related to 3DStreet? | ||
![Screenshot of the layers panel in 3DStreet Editor.](/img/docs/tutorials/tutorial-streetmix-screenshot.jpg) | ||
|
||
**[Streetmix](https://streetmix.net)** is a collaborative civic engagement platform for urban design that allows you to design, remix, and share your neighborhood street. With Streetmix, you can create, remix, save, and collaborate on cross section views of streets by dragging and dropping street segments, changing the size and order of these segments, and choosing variants for each segment. | ||
|
||
Streetmix and 3DStreet are separate projects and are not directly related to each other, but 3DStreet does support importing Streetmix streets. Both projects are open-source AGPL licensed projects encouraging collaborative design of safer streets. | ||
|
||
## How can I get help? | ||
For 3DStreet Editor, click the `?` icon on the lower left corner of the app. This will open up the help section. There are two sections Keyboard Shortcuts to find how to use the key functions and essential functions to use important functions in the app. | ||
|
||
If you more help with 3DStreet, join our 3DStreet Discord server linked in the footer of this page. For Streetmix assistance, refer to [Streetmix's Community page](https://docs.streetmix.net/community) with links to their Discord. | ||
|
||
## Let's get started | ||
[In the next step](/docs/tutorial-streetmix-to-3dstreet/create-a-streetmix-account), we'll show you how to create a Streetmix account. If you already have a Streetmix account you can login and skip ahead to the step after, [Creating or Remixing a Street in Streemix](/docs/tutorial-streetmix-to-3dstreet/create-or-remix-a-street-in-streetmix). |