Quick Start - How to make your own 3D street:
- First, use Streetmix.net to create a street design. (Streetmix is a tool that lets you design, remix, and share your neighborhood street. More information about Streetmix here.)
- Then, save a Streetmix street after making an account to generate a unique URL for your street looking something like this:
- Load https://github.3d.st/, paste in your street URL, and press enter or the refresh button.
- See your Streetmix street in 3D! See instant changes to your work: Switch back to a Streetmix.net tab, make changes to your street, then reload the 3DStreet page to see the edits applied.
- For more information, please see our 3DStreet and Streetmix Tutorial.
3DStreet is built upon a custom A-Frame
street component which is also available for you to customize for your own custom A-Frame street scenes. The
street component takes a string of JSON and renders one or more "segments" (also known as lanes or slices) of a street and optionally buildings and ground to the left and right.
<html> <head> <title>Street Component!</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <script src="https://email@example.com/dist/aframe-street-component.js"></script> </head> <body> <a-scene gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;"> <a-entity id="mySimpleStreet" street streetmix-loader="streetmixStreetURL: https://streetmix.net/kfarr/3/" ></a-entity> </a-scene> </body> </html>
street Component API
|JSON||A string of JSON containing an array one or more segments (also known as slices) representing cross-section parts of a street. See basic-json.html for an example of proper usage||''|
|type||A string representing the formatting of the JSON passed in the
|left||A string to determine which building variant to create for the left side of the street (heading outbound)||''|
|right||A string to determine which building variant to create for the right side of the street (heading outbound).||''|
|showGround||A boolean to determine if the ground associated with the specified building variant(s) in
|showStriping||A boolean to determine if the lane stripings should be created or not.||true|
|length||A number that sets the street's length in meters||150|
Orientation and Scale
A default Streetmix.net cross-section view is oriented to show vehicles heading away from you as "outbound". The
street component follows this convention and when placed in a new A-Frame scene the default camera is looking toward the outbound direction of the generated street. The default rendering is 1:1 scale.
Automatic Asset Loading
aframe-street-component.js is included on a page it automatically loads 3D models and other assets using the A-Frame asset loader by adding them to the scene's
a-assets block and defining mixins pointing to these assets. The
street component itself simply places entities with appropriate mixin names. For more information on the asset loader see this docs link.
streetmix-loader Component API
streetmix-loader component requests a Streetmix API response when given a unique street URL and then passes the segments array JSON as a string to the
street component (which is a dependency -- you must have the
street component on the same entity as that of the
|streetmixStreetURL||A string representing a "user facing" Streetmix street URL such as https://streetmix.net/kfarr/3/||''|
|streetmixAPIURL||A string representing the Streetmix API street URL such as https://streetmix.net/api/v1/streets/7a633310-e598-11e6-80db-ebe3de713876||''|
|showBuildings||A Boolean that determines whether or not buildings are rendered||true|
Either 1 of the 2 properties are required. If both are provided the component will use streetmixAPIURL value and ignore streetmixStreetURL.
List of Supported Segment Types
3DStreet does not yet support all of the street
segments found in Streetmix. You may find some segments don't display at all or are missing 3D elements. Here is a complete list:
|Streetmix Segment Type||3DStreet Support?||Variants||Notes and Model Source|
|sidewalk||Yes - Partial||
||All variants show empty sidewalk, no pedestrian 3d models or density variants.|
|sidewalk-lamp||Yes - All||Variants:
||Modern Lamp Post, License Google Poly CC Attrib; Traditional Lamp Post, License Google Poly CC Attrib|
|bike-lane||Yes - All||Variants:
||No bikes shown|
|drive-lane||Yes - Partial||
|turn-lane||Yes - All||
||Note: there appears to be a bug with Streetmix.net rendering of
|bus-lane||Yes - Partial||
||Model Credits: New Flyer XD40 Bus|
|divider||Yes - Partial||
||striped-buffer is rendered for all variants. Original model credit: Flexi Guide 300 Safe Hit Post|
|parking-lane||Yes - Partial||
|sidewalk-tree||Yes - All||
||Supports palm tree and normal ("big") street tree. Palm Tree: License Google Poly CC Attrib, Model Source, Street Tree: License Sketchfab "Standard", Polygon City Pack|
|sidewalk-bench||Yes - Partial||
||"center" bench not supported.|
|sidewalk-bike-rack||Yes - Partial||Doesn't support height -- always at sidewalk level. No bike model yet, just the rack. Model credits: Bike Rack by illustrationlogic, License CC BY NC SA 4.0|
|sidewalk-wayfinding||Yes - Partial||
||All size variants render the same simple wayfinding obelisk shape with texture based on original NYC design from Pentagram..|
|light-rail||Yes - All||
||Model credits: Siemens Avenio, License CC BY NC SA 4.0; Train track 2 black, License Google Poly CC BY|
|streetcar||Yes - All||
||Model credit: Godarville Tram, License Turbo Squid Royalty Free|
|transit-shelter||Yes - Partial||Doesn't support height -- always at sidewalk level.|
|train||No||No support planned, not a public Streetmix segment type.|
|scooter||Yes - All||Variants:
||No scooters shown. (Treated identically to a bike lane.)|
||Rendered every 100 meters. Original model credit|
List of Building Variants
"Buildings" are lots and/or objects rendered on either side of the street to add to the setting.
|Streetmix Building Variants||3DStreet Support?||Notes|
|fence||Yes||Fence Model: Paid Royalty Free License CGTrader.com T&Cs Paragraph 21 for construction fence Low-poly 3D model|
|waterfront||Yes||Credit to @Lady_Ada_King for a-ocean-plane; @threejs for water normal jpeg; cgskies for sky image (paid license). Seawall Models: License Sketchfab "Standard" from Polygon City Pack|
|residential||Yes||Buildings: License Synty Store EULA from Polygon Town Pack. Does not support varying floors as specified by Streetmix JSON.|
|narrow||Yes - partial|
|wide||Yes - partial|
The 3DStreet codebase is offered under the GNU Affero General Public License v3, as specified in the LICENSE file.
Assets such as 3D models, textures, and audio are offered under the Creative Commons By Attribution Non-Commercial License, unless a more specific license is specified for each asset in the documentation on this page.
Contact firstname.lastname@example.org for commercial licensing.
See this link for more information about the custom components developed and modified for the project.
- Creative Commons Google Poly
- Some city / car models https://sketchfab.com/3d-models/polygon-city-pack-preview-5a16f543d1054fbc9ce1cb17a2ba412e
- Some road textures https://www.textures.com/download/roads0086/44877 https://www.textures.com/download/roads0122/55065
- Sidewalk textures https://www.textures.com/download/floorsregular0299/87153 https://www.textures.com/download/floorsregular0301/87158
- Fence model https://sketchfab.com/3d-models/chainlink-fence-low-poly-50901b0cc91b4e04a18ecd13bc379a90
- Bus stop, creative commons https://poly.google.com/view/7iBPwMlmfge
- Do something with this adorable train: https://sketchfab.com/3d-models/tram-and-rails-modular-4168da5a8b884171b4540dd33eb05ef2
- Trolley: https://sketchfab.com/3d-models/neighborhood-trolley-3bc683cca6b84d8985cc0befe710b8fa
- wide, narrow urban building variants: Ambient SF https://www.soundsnap.com/ssl_16_11_amb_ext_afternoon_alamo_square_painted_houses_park_with_birds_some_people_around_calm_city_san_francisco_st_wav
- fence, grass variants - AMB_Suburbs_Afternoon_Woods_Spring_Small Field_Bird Chirps_Low Car Rumbles_Grass_Leaves Rustle_ST_MKH8050-30.mp3
- parking-lot variant - "Parking lot ambience - long - looping.mp3" https://www.soundsnap.com/parking_lot_ambience_long_looping_wav
- waterfront variant - UKdock4.mp3 - https://www.soundsnap.com/ukdock4
- waterfront variant - Water pier underneath small waves distant traffic ambience_BLASTWAVEFX_31752.mp3 - https://www.soundsnap.com/node/96455
- residential (suburban) variant - lawn mower, etc. - AMB_Suburbs_Spring_Day_Distant Lawnmowers_Birds_Distant Traffic_Distant Plastic Windmill Spin_Truck Pass By_Plane Overhead_MS_ST_MKH8050-30.mp3 https://www.soundsnap.com/amb_suburbs_spring_day_distant_lawnmowers_birds_distant_traffic_distant_plastic_windmill_spin_truck_pass_by_plane_overhead_ms_st
- Diesel idling bus https://www.soundsnap.com/turbodiesel_bus_riding_and_idling
- Tram pass https://www.soundsnap.com/tram_pass_by_fast_wav
- Historic streetcar pass https://www.soundsnap.com/streetcar_passing_by_smoothly