Comments (4)
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.
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.
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?
from react-three-map.
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)
- A Circle with 1km Radius HOT 1
- Drei <Html transform /> flickering HOT 4
- I Get the "THREE.WebGLRenderer: WebGL 1 is not supported since r163." when rendering a canvas HOT 1
- question: is north always -y and east +x HOT 1
- Can't display multiple <Coordinates/> HOT 1
- White screen crash when changing the location of 3d models HOT 2
- Support globe projection? HOT 1
- Changing the pitch/bearing of the map (i.e dragging/rotating) moves "fixed" object HOT 1
- Pinpoint scale effect HOT 1
- Integration inside another canvas HOT 4
- Models below surface clipped at certain camera angles HOT 1
- Use ThreeJS as a canvas overlay
- Base map HOT 1
- Adding Mapbox 3D buildings HOT 1
- React Native HOT 1
- Object controls on top of 3D Map HOT 5
- Checking whether or not the 3D environment is inside the polygon HOT 2
- Examples Error HOT 1
- Google WebGL maps? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-three-map.