3dstreet 中文文档教程

发布于 3年前 浏览 34 项目主页 更新于 3年前

3DStreet

版本许可证Build Status

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

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

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

3DStreet 创建 2D 的 3D 可视化 Streetmix.net 使用 A-Frame 和 WebXR 的街道。 开发者可以在自己的项目中使用 3DStreet 的相同核心 street A-Frame 组件

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.
  • For more information, please see our 3DStreet and Streetmix Tutorial.

A-Frame component

3DStreet 建立在一个自定义的 A-Frame street 组件之上,该组件也可用为您定制您自己的定制 A 型框架街景。 street 组件采用一串 JSON 并呈现街道的一个或多个“段”(也称为车道或切片)以及左右两侧可选的建筑物和地面。

Usage Example

Remix

<html>
  <head>
    <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.13/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>

A-Frame street Component API

PropertyDescriptionDefault Value
JSONA 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''
typeA string representing the formatting of the JSON passed in the JSON property'streetmixSegmentsFeet'
leftA string to determine which building variant to create for the left side of the street (heading outbound)''
rightA string to determine which building variant to create for the right side of the street (heading outbound).''
showGroundA boolean to determine if the ground associated with the specified building variant(s) in left and right should be created or not.true
showStripingA boolean to determine if the lane stripings should be created or not.true
lengthA number that sets the street's length in meters150

Orientation and Scale

默认的 Streetmix.net 横截面视图的方向是将驶离您的车辆显示为“出站”。 street 组件遵循此约定,当放置在新的 A-Frame 场景中时,默认相机朝向生成的街道的出站方向。 默认渲染比例为 1:1。

Automatic Asset Loading

当页面中包含 aframe-street-component.js 时,它会使用 A-Frame 资产加载器自动加载 3D 模型和其他资产,方法是将它们添加到场景的 a-assets 阻止和定义指向这些资产的混合。 street 组件本身只是放置具有适当混合名称的实体。 有关资产加载器的更多信息,请参阅此文档链接

A-Frame streetmix-loader Component API

streetmix-loader 组件在给定一个唯一的街道 URL 时请求 Streetmix API 响应,然后将分段数组 JSON 作为字符串传递给 street 组件(这是一个依赖项 - - 您必须在与 streetmix-loader 组件相同的实体上拥有 street 组件)。

PropertyDescriptionDefault Value
streetmixStreetURLA string representing a "user facing" Streetmix street URL such as https://streetmix.net/kfarr/3/''
streetmixAPIURLA string representing the Streetmix API street URL such as https://streetmix.net/api/v1/streets/7a633310-e598-11e6-80db-ebe3de713876''
showBuildingsA Boolean that determines whether or not buildings are renderedtrue

需要 2 个属性中的 1 个。 如果两者都提供,组件将使用 streetmixAPIURL 值并忽略 streetmixStreetURL。

List of Supported Segment Types

3DStreet 尚不支持 Streetmix 中的所有街道 segments。 您可能会发现某些片段根本不显示或缺少 3D 元素。 这是一个完整的列表:

Streetmix Segment Type3DStreet Support?VariantsNotes and Model Source
sidewalkYes - PartialemptyAll variants show empty sidewalk, no pedestrian 3d models or density variants.
sidewalk-lampYes - AllVariants: right, left, both Subvariants: modern, traditional, prideModern Lamp Post, License Google Poly CC Attrib; Traditional Lamp Post, License Google Poly CC Attrib
bike-laneYes - AllVariants: regular, red, greenNo bikes shown
drive-laneYes - Partialcar-type: "car" and "sharrow"Not supported: car-type truck and autonomous vehicle
turn-laneYes - Allleft right left-right-straight shared both left-straight right-straight straightNote: 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-laneYes - Partialshared (sharrow) variant not supportedModel Credits: New Flyer XD40 Bus
dividerYes - Partialstriped-buffer, bollardstriped-buffer is rendered for all variants. Original model credit: Flexi Guide 300 Safe Hit Post
parking-laneYes - Partialparking-lane-direction and parking-lane-orientation unsupported, parking delimiter markings unsupported
sidewalk-treeYes - Allpalm-tree, bigSupports 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-benchYes - Partialleft, right"center" bench not supported.
sidewalk-bike-rackYes - PartialDoesn'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-wayfindingYes - Partialsmall, medium, large variants all render same objectAll size variants render the same simple wayfinding obelisk shape with texture based on original NYC design from Pentagram..
parkletNo
light-railYes - Allgrass variant displays as green color asphaltModel credits: Siemens Avenio, License CC BY NC SA 4.0; Train track 2 black, License Google Poly CC BY
streetcarYes - Allgrass variant displays as green color asphaltModel credit: Godarville Tram, License Turbo Squid Royalty Free
transit-shelterYes - PartialDoesn't support height -- always at sidewalk level.
trainNoNo support planned, not a public Streetmix segment type.
scooterYes - AllVariants: regular, red, greenNo scooters shown. (Treated identically to a bike lane.)
scooter-drop-zoneNo
bikeshareYesleft rightRendered every 100 meters. Original model credit
food-truckNo
flex-zoneNo
flex-zone-curbNo

List of Building Variants

“建筑物”是在街道两边呈现的地段和/或对象,以添加到设置中。

Streetmix Building Variants3DStreet Support?Notes
grassYeshttps://www.textures.com/download/grass0052/12094
fenceYesFence Model: Paid Royalty Free License CGTrader.com T&Cs Paragraph 21 for construction fence Low-poly 3D model
parking-lotYeshttps://www.textures.com/download/roads0111/53096
waterfrontYesCredit to @LadyAdaKing for a-ocean-plane; @threejs for water normal jpeg; cgskies for sky image (paid license). Seawall Models: License Sketchfab "Standard" from Polygon City Pack
residentialYesBuildings: License Synty Store EULA from Polygon Town Pack. Does not support varying floors as specified by Streetmix JSON.
narrowYes - partial
wideYes - partial

License

3DStreet 代码库根据 GNU Affero 通用公共许可证 v3 提供,如许可证文件中所指定。

3D 模型、纹理和音频等资产根据Creative Commons By Attribution Non-Commercial License 提供,除非在本页的文档中为每个资产指定了更具体的许可证。

联系 k@3d.st 获取商业许可。

Developer Docs

有关为项目开发和修改的自定义组件的更多信息,请参见此链接

Model Credits

  • 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

Audio Credits

  • wide, narrow urban building variants: Ambient SF https://www.soundsnap.com/ssl1611ambextafternoonalamosquarepaintedhousesparkwithbirdssomepeoplearoundcalmcitysanfranciscost_wav
  • fence, grass variants - AMBSuburbsAfternoonWoodsSpringSmall FieldBird ChirpsLow Car RumblesGrassLeaves RustleST_MKH8050-30.mp3
  • parking-lot variant - "Parking lot ambience - long - looping.mp3" https://www.soundsnap.com/parkinglotambiencelonglooping_wav
  • waterfront variant - UKdock4.mp3 - https://www.soundsnap.com/ukdock4
  • waterfront variant - Water pier underneath small waves distant traffic ambienceBLASTWAVEFX31752.mp3 - https://www.soundsnap.com/node/96455
  • residential (suburban) variant - lawn mower, etc. - AMBSuburbsSpringDayDistant LawnmowersBirdsDistant TrafficDistant Plastic Windmill SpinTruck Pass ByPlane OverheadMSSTMKH8050-30.mp3 https://www.soundsnap.com/ambsuburbsspringdaydistantlawnmowersbirdsdistanttrafficdistantplasticwindmillspintruckpassbyplaneoverheadms_st
  • Diesel idling bus https://www.soundsnap.com/turbodieselbusridingandidling
  • Tram pass https://www.soundsnap.com/trampassbyfastwav
  • Historic streetcar pass https://www.soundsnap.com/streetcarpassingby_smoothly

3DStreet

VersionLicenseBuild Status

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

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

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

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.
  • For more information, please see our 3DStreet and Streetmix Tutorial.

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

Remix

<html>
  <head>
    <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.13/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>

A-Frame street Component API

PropertyDescriptionDefault Value
JSONA 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''
typeA string representing the formatting of the JSON passed in the JSON property'streetmixSegmentsFeet'
leftA string to determine which building variant to create for the left side of the street (heading outbound)''
rightA string to determine which building variant to create for the right side of the street (heading outbound).''
showGroundA boolean to determine if the ground associated with the specified building variant(s) in left and right should be created or not.true
showStripingA boolean to determine if the lane stripings should be created or not.true
lengthA number that sets the street's length in meters150

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

When 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.

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).

PropertyDescriptionDefault Value
streetmixStreetURLA string representing a "user facing" Streetmix street URL such as https://streetmix.net/kfarr/3/''
streetmixAPIURLA string representing the Streetmix API street URL such as https://streetmix.net/api/v1/streets/7a633310-e598-11e6-80db-ebe3de713876''
showBuildingsA Boolean that determines whether or not buildings are renderedtrue

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 Type3DStreet Support?VariantsNotes and Model Source
sidewalkYes - PartialemptyAll variants show empty sidewalk, no pedestrian 3d models or density variants.
sidewalk-lampYes - AllVariants: right, left, both Subvariants: modern, traditional, prideModern Lamp Post, License Google Poly CC Attrib; Traditional Lamp Post, License Google Poly CC Attrib
bike-laneYes - AllVariants: regular, red, greenNo bikes shown
drive-laneYes - Partialcar-type: "car" and "sharrow"Not supported: car-type truck and autonomous vehicle
turn-laneYes - Allleft right left-right-straight shared both left-straight right-straight straightNote: 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-laneYes - Partialshared (sharrow) variant not supportedModel Credits: New Flyer XD40 Bus
dividerYes - Partialstriped-buffer, bollardstriped-buffer is rendered for all variants. Original model credit: Flexi Guide 300 Safe Hit Post
parking-laneYes - Partialparking-lane-direction and parking-lane-orientation unsupported, parking delimiter markings unsupported
sidewalk-treeYes - Allpalm-tree, bigSupports 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-benchYes - Partialleft, right"center" bench not supported.
sidewalk-bike-rackYes - PartialDoesn'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-wayfindingYes - Partialsmall, medium, large variants all render same objectAll size variants render the same simple wayfinding obelisk shape with texture based on original NYC design from Pentagram..
parkletNo
light-railYes - Allgrass variant displays as green color asphaltModel credits: Siemens Avenio, License CC BY NC SA 4.0; Train track 2 black, License Google Poly CC BY
streetcarYes - Allgrass variant displays as green color asphaltModel credit: Godarville Tram, License Turbo Squid Royalty Free
transit-shelterYes - PartialDoesn't support height -- always at sidewalk level.
trainNoNo support planned, not a public Streetmix segment type.
scooterYes - AllVariants: regular, red, greenNo scooters shown. (Treated identically to a bike lane.)
scooter-drop-zoneNo
bikeshareYesleft rightRendered every 100 meters. Original model credit
food-truckNo
flex-zoneNo
flex-zone-curbNo

List of Building Variants

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

Streetmix Building Variants3DStreet Support?Notes
grassYeshttps://www.textures.com/download/grass0052/12094
fenceYesFence Model: Paid Royalty Free License CGTrader.com T&Cs Paragraph 21 for construction fence Low-poly 3D model
parking-lotYeshttps://www.textures.com/download/roads0111/53096
waterfrontYesCredit to @LadyAdaKing for a-ocean-plane; @threejs for water normal jpeg; cgskies for sky image (paid license). Seawall Models: License Sketchfab "Standard" from Polygon City Pack
residentialYesBuildings: License Synty Store EULA from Polygon Town Pack. Does not support varying floors as specified by Streetmix JSON.
narrowYes - partial
wideYes - partial

License

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

  • 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

Audio Credits

  • wide, narrow urban building variants: Ambient SF https://www.soundsnap.com/ssl1611ambextafternoonalamosquarepaintedhousesparkwithbirdssomepeoplearoundcalmcitysanfranciscost_wav
  • fence, grass variants - AMBSuburbsAfternoonWoodsSpringSmall FieldBird ChirpsLow Car RumblesGrassLeaves RustleST_MKH8050-30.mp3
  • parking-lot variant - "Parking lot ambience - long - looping.mp3" https://www.soundsnap.com/parkinglotambiencelonglooping_wav
  • waterfront variant - UKdock4.mp3 - https://www.soundsnap.com/ukdock4
  • waterfront variant - Water pier underneath small waves distant traffic ambienceBLASTWAVEFX31752.mp3 - https://www.soundsnap.com/node/96455
  • residential (suburban) variant - lawn mower, etc. - AMBSuburbsSpringDayDistant LawnmowersBirdsDistant TrafficDistant Plastic Windmill SpinTruck Pass ByPlane OverheadMSSTMKH8050-30.mp3 https://www.soundsnap.com/ambsuburbsspringdaydistantlawnmowersbirdsdistanttrafficdistantplasticwindmillspintruckpassbyplaneoverheadms_st
  • Diesel idling bus https://www.soundsnap.com/turbodieselbusridingandidling
  • Tram pass https://www.soundsnap.com/trampassbyfastwav
  • Historic streetcar pass https://www.soundsnap.com/streetcarpassingby_smoothly

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文