Threejs make a displaced mesh (terrain model) [closed]

问题

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed last year.

So I have around 59k data points that I'm visualizing. Currently I'm making them into a texture, and then applying them to a plane geometry.

Now the issue is that I need to show a heightmap, each datapoint has a height value, and I need to apply that to the mesh.

How is the best way to go about doing this? Previously I was displaying this data using a ton of cube geometries, which I could then change the height on. But this made performance suffer, so it wasn't really an option.

回答1:

Displacement shader is needed to increase the performance by pushing the calculation to GPU.

This is a good example of using displacement shader.

This is an example of heightmap using displacement shader

回答2:

Previously I was displaying this data using a ton of cube geometries, which I could then change the height on. But this made performance suffer, so it wasn't really an option.

Try to use THREE.BufferGeometry and index buffer. Here is a sample of index buffer usage(it's not three.js) https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL

Check this sample http://alteredqualia.com/three/examples/webgl_cubes.html

来源：https://stackoverflow.com/questions/32447897/threejs-make-a-displaced-mesh-terrain-model