GithubHelp home page GithubHelp logo

Terrain Support? about react-three-map HOT 4 OPEN

rodrigohamuy avatar rodrigohamuy commented on August 19, 2024
Terrain Support?

from react-three-map.

Comments (4)

hecodeit avatar hecodeit commented on August 19, 2024

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>

from react-three-map.

RodrigoHamuy avatar RodrigoHamuy commented on August 19, 2024

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.

from react-three-map.

hecodeit avatar hecodeit commented on August 19, 2024

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?

Screenshot (260)

from react-three-map.

RodrigoHamuy avatar RodrigoHamuy commented on August 19, 2024

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.

from react-three-map.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.