0.2.3 • Public • Published


    Project site: https://3d.st/

    Basic demo: https://github.3d.st/

    Custom UI demo: https://app.3d.st/

    Version License Build Status

    3DStreet creates 3D visualizations of your 2D Streetmix.net streets using A-Frame and WebXR. Developers can use the same core street A-Frame component of 3DStreet for their own projects.

    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: https://streetmix.net/kfarr/3/my-awesome-street-name
    • 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.

    A-Frame component

    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.

    Usage Example


        <title>Street Component!</title>
        <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
        <script src="https://unpkg.com/3dstreet@0.2.0/dist/aframe-street-component.js"></script>
        <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-Frame street Component API

    Property Description Default Value
    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 JSON property 'streetmixSegmentsFeet'
    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 left and right should be created or not. true
    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.

    A-Frame streetmix-loader Component API

    The 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 streetmix-loader component).

    Property Description Default Value
    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 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

    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
    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 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 k@3d.st for commercial licensing.

    Developer Docs

    See this link for more information about the custom components developed and modified for the project.

    Model Credits

    Audio Credits


    npm i 3dstreet

    DownloadsWeekly Downloads






    Unpacked Size

    40.7 MB

    Total Files


    Last publish


    • kfarr