3DStreet / 3dstreet

🚲🚶🚌 Web-based 3D visualization of streets using A-Frame
https://3dstreet.app
Other
256 stars 33 forks source link

Ability for user to define path and then assign street #90

Open kfarr opened 3 years ago

kfarr commented 3 years ago

Via Slack from Michael Meier:

My approach would be to firstly define a line or a spline and then extrude the street along that line/spline. (see this example made with babylon.js https://playground.babylonjs.com/#ZMKN5T#5) you could then add the traffic lines as textures on top of the extruded street and align the surrounding houses according to the line/spline. This should also work with curves. But it's only a very high level idea and not sure if Aframe (Three.js) supports extrusion along splines. What do you think?

From a user perspective the process would be:

  1. Load the satellite image as the ground floor (as shown in Kieran's demo https://17thpreso.glitch.me/)
  2. Select the points for the line/spline on the satellite image
  3. Select the layout link from Streetmix
  4. The scene gets generated along the spline/line on top of the satellite image

One point that might be a little difficult is that we don't know the metrics of the satellite image. Therefore we don't know if the desired street layout actually fits the street on the image. One way to get the metrics would be to retrieve the map and metrics via a map API eg. mapbox, google, openstreetmap, ...

kfarr commented 3 years ago

That's a super cool idea. And yes that would be possible in three.js. There are a few different curve / path libraries. Extrusion is more difficult but also possible. Here are a few relevant three.js links just to show what is possible: https://threejs.org/examples/?q=spline#webgl_geometry_spline_editor https://threejs.org/examples/?q=spline#webgl_geometry_extrude_splines https://github.com/zz85/threejs-path-flow