Terrain Support？

[hecodeit]

First of all, thank you very much for this project. It only took an afternoon to get the React Three Fiber and Mapbox project up and running.

Since I am new to this project, I noticed that the map does not include altitude information. Does it support Mapbox's terrain feature: https://docs.mapbox.com/mapbox-gl-js/example/add-terrain/

[hecodeit]

Already document at: https://visgl.github.io/react-map-gl/examples/terrain

This code can work:

<Map
  antialias
  initialViewState={{
    latitude: 45.646462036649936,
    longitude: 9.598838045131584,
    zoom: 17,
    pitch: 30,
  }}
  mapStyle="mapbox://styles/mapbox/satellite-streets-v12"
  terrain={{ source: "mapbox-dem", exaggeration: 1.5 }}
>
  <Source
    id="mapbox-dem"
    type="raster-dem"
    url="mapbox://mapbox.mapbox-terrain-dem-v1"
    tileSize={512}
    maxzoom={14}
  />
  <Canvas
    latitude={45.646462036649936}
    longitude={9.598838045131584}
    altitude={0}
  >
  </Canvas>
</Map>

[RodrigoHamuy]

Hi @hecodeit. I don't think react-three-map should be in charge of deciding how to render your scene based on terrain data, but you can interpret it however you want.

So for a small scene or a fairly flat surface, you can just pass the altitude to Canvas from react-three-map.

For a big scene, you decide how you want to adapt your scene. Maybe by moving the objects position.y or through a vertex shader to change their vertical value based on the elevation data.

But I think it is fair that that's outside of the scope of this project, unless somebody wants to add a component that does exactly this and PR it (😉 😉 ) as an add-on rather than be an integrated part of the current components.

[hecodeit]

Thanks for reply @RodrigoHamuy.

I think the map itself, used as a background canvas. The Three.js part should include position.y information itself. Therefore, the map is flat, or the terrain don't matter. The Three.js scene should including position.y. The connection between them is the data, for map is latitude, longitude, altitude, and for Three.js is xyz information.

For example, a small town has some buildings at lower altitudes and others on hilltops. This town is a Three.js scene. Therefore, the background map will not affect the Three.js scene in any way. However, in this case, displaying the map as terrain is a better choice.

Do you think this understanding is correct?

[RodrigoHamuy]

Even if we lift the scene based on the origin coordinates, it will only be at the origin point, so that' won't be enough for most cases. Like in the image you provide, you need to know the altitude at certain intervals and decide if you want to morph the vertices via shader or manually set the geometry correctly. That's why I think this is out of the R3M scope.