Try in your browser now: https://kfarr.github.io/streetmix3d/
Streetmix3D creates 3D visualizations of your 2D Streetmix.net streets using A-Frame and WebXR.
- 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 using a Twitter account so that you have a unique URL for your street that looks something like this:
https://streetmix.net/kfarr/3/my-awesome-street-name - Load https://kfarr.github.io/streetmix3d/, paste in your street URL, and press the magic green button.
- See instant changes to your work: Switch back to a Streetmix.net tab, make changes to your street, then reload the Streetmix3D page to see the edits applied.
Streetmix3D 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 | Streetmix3D Support? | Supported Variants | Notes and Model Source |
|---|---|---|---|
| sidewalk | Yes - Partial | empty |
All variants show empty sidewalk, no pedestrian 3d models or density variants. |
| sidewalk-lamp | Yes - All | Variants: right, left, both Subvariants: modern, traditional, pride |
Modern Lamp Post, License Google Poly CC Attrib; Traditional Lamp Post, License Google Poly CC Attrib |
| bike-lane | Yes - All | Variants: regular, red, green |
No bikes shown |
| drive-lane | Yes - Partial | car-type: "car" and "sharrow" |
Not supported: car-type truck and autonomous vehicle |
| turn-lane | Yes - All | left right left-right-straight shared both left-straight right-straight straight |
Note: there appears to be a bug with Streetmix.net rendering of turn-lane-orientation variant in street cross section for inbound - it appears to be inverted from the street's json database value. streetmix/streetmix#683. Note: Shared turn lane does not exhibit proper segment lane markings. |
| bus-lane | Yes - Partial | shared (sharrow) variant not supported |
Model Credits: New Flyer XD40 Bus |
| divider | Yes - Partial | striped-buffer, bollard |
striped-buffer is rendered for all variants. Original model credit: Flexi Guide 300 Safe Hit Post |
| parking-lane | Yes - Partial | parking-lane-direction and parking-lane-orientation unsupported, parking delimiter markings unsupported |
|
| sidewalk-tree | Yes - All | palm-tree, big |
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 | left, right |
"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 | small, medium, large variants all render same object |
All size variants render the same simple wayfinding obelisk shape with texture based on original NYC design from Pentagram.. |
| parklet | No | ||
| light-rail | Yes - All | grass variant displays as green color asphalt |
Model credits: Siemens Avenio, License CC BY NC SA 4.0; Train track 2 black, License Google Poly CC BY |
| streetcar | Yes - All | grass variant displays as green color asphalt |
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: regular, red, green |
No scooters shown. (Treated identically to a bike lane.) |
| scooter-drop-zone | No | ||
| bikeshare | Yes | left right |
Rendered every 100 meters. Original model credit |
| food-truck | No | ||
| flex-zone | No | ||
| flex-zone-curb | No |
"Buildings" are lots and/or objects rendered on either side of the street to add to the setting.
| Streetmix Building | Streetmix3D Support? | Supported Variants | Notes |
|---|---|---|---|
| grass | Yes | https://www.textures.com/download/grass0052/12094 | |
| fence | Yes | Fence Model: Paid Royalty Free License CGTrader.com T&Cs Paragraph 21 for construction fence Low-poly 3D model | |
| parking-lot | Yes | https://www.textures.com/download/roads0111/53096 | |
| 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 | No | ||
| narrow | Yes - partial | Buildings: License Sketchfab "Standard" from Polygon City Pack. Does not support varying floors as specified by Streetmix JSON. | |
| wide | Yes - partial | Same as narrow. In the future this could include back alleyway, backyards, etc. ; https://www.textures.com/download/asphaltdamaged0057/46489 |
Here are some tips and links from my experience "reverse engineering" Streetmix to get info out of their API.
I heavily referenced this Streetmix page which outlines all the possible segments: https://github.com/streetmix/streetmix/blob/master/assets/scripts/segments/info.json
I learned a few things:
- Each street has a unique UUID (such as
7a633310-e598-11e6-80db-ebe3de713876) with its own corresponding API endpoint (such as https://streetmix.net/api/v1/streets/7a633310-e598-11e6-80db-ebe3de713876) - This UUID is not shown in the UI. It can be found by going to this URL and supplying the nameSpacedId and creatorId, such as: https://streetmix.net/api/v1/streets?namespacedId=3&creatorId=kfarr . This will redirect to the UUID API endpoint
- I wrote a quick JS helper function that takes a user facing URL on Streetmix (such as https://streetmix.net/kfarr/3/a-frame-city-builder-street-only) and transforms it into the API Redirect to find the UUID endpoint. You can find the helper function docs here.
See this link for more information about the custom components developed and modified for the project.
- Unless credited all models, materials and textures created by Kieran Farr, MIT License same as project repo
- 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
See DEV-NOTES for additional notes on future features and work in progress.