how to make a camera follows the terrain's height in this sample: http://threejs.org/examples/#webgl_terrain_dynamic

Question

I would like to know how I could make the camera in this three js example: http://threejs.org/examples/#webgl_terrain_dynamic

follows the terrain's height. So, while the terrain is moving, the camera will go up and down according to the hills (height) of the terrain.

In other words, how I could get the terrain's height, knowing that the height of the terrain is built by an heightmap ?

I've already try with a Raycaster as follow:

var raycaster = new THREE.Raycaster( camera.position, new THREE.Vector3(0, -1, 0) );
var intersects = raycaster.intersectObject( terrain, false );
var intersect_point = intersetcs[0].point;

But intersect_point always has its y value equal to 0 no matter where the camera is located. Indeed, the height of the terrain in this example is created by an heightmap. Thus, the geometry of the terrain which is a plan is not changed by the heightmap and remains flat, hence the result of the raycaster.

Could you help me on how to find a way to get the terrain's height for a given position.

thanks a lot for your help.

Answer 1

In the example itself, calculate the camera position relative to the "heightmap" texture, and read the height information out (you may want to look into the shader heightmap is using to determine how to "read it", as I don't remember the detail of it).

Here's the general solution I would use.

Step 1: Replicate the terrain shader (the one that adds the color, not the one that creates the physical terrain) and modify it so that instead of outputting terrain color, output color based-on distance from camera (think MeshDepthMaterial or MeshDistanceMaterial). You do have to perform some float<-> color packing to ensure you can read the full float back out. We'll call this the "Distance Shader", since its goal is to render how far things are from your camera.

Step 2: Add a camera that looks straight down (with respect to the terrain), you'll need to keep this camera's position synchronized with your actual camera. This should be fairly easy to do during the rendering loop (just copy the position vector). The camera's field of view can be very small (like 1 degree). We'll call this your "Height Camera", since its goal is to determine the height.

Step 3: In you rendering loop. First render the terrain with your "Distance Shader" and "Height Camera" into a texture target (can be small, maybe just 1 pixel by 1 pixel).

Step 4: Read the color information from the texture target in Step 3, covert it from RGBA back into float using by reversing the color packing. Now you have the height.