Streetmix3d NPM

Streetmix3D

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.

How to make your own Streetmix3D 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 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.

Streetmix Segment Support

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. https://github.com/streetmix/streetmix/issues/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

Streetmix Building Support

"Buildings" are lots and/or objects rendered on either side of the street to add to the setting.

Streetmix Building	Streetmix3D Support?	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

Helpful Streetmix debugging information

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.