0

In three.js I draw a map using displacementMap option. Like this

// ADD CAMERA
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.up.set( 0, 0, 1 );
camera.position.set(GAME_CONTEXT.camera_init_position.x, GAME_CONTEXT.camera_init_position.y, GAME_CONTEXT.camera_init_position.z); 
camera.lookAt(Utils.GetCameraLookAtDirection(GAME_CONTEXT, camera));

// ADD MAP
const loader = new THREE.TextureLoader();
const height = loader.load(GAME_CONTEXT.height_map_link);
const texture = loader.load(GAME_CONTEXT.texture_map_link);
const map_geometry = new THREE.PlaneBufferGeometry(GAME_CONTEXT.width, GAME_CONTEXT.height, 64, 64);
const map_material = new THREE.MeshStandardMaterial({
    color:'orange',
    //side: THREE.DoubleSide,
    map:texture,
    displacementMap: height,
    displacementScale: GAME_CONTEXT.scale,
    //alphaMap: alpha,
    //transparent:true
});
const map_plane = new THREE.Mesh(map_geometry, map_material);
map_plane.position.x += GAME_CONTEXT.width/2;
map_plane.position.y += GAME_CONTEXT.height/2;
scene.add( map_plane );

Now if I have a (x,y,z) coordinate in the game world (the z is the surface height of the displacement map at (x,y)), how can I calculate the normalized vector representing the perpendicular vector to the plane?

Like in this image, if the yellow part is the surface of the terrain in the displacement map, then I want the vector in red as normalized too.

How can one calculate this?

enter image description here

omega
  • 40,311
  • 81
  • 251
  • 474
  • Since your z axis is the surface height, isn't the plane's normal always (0, 0, 1) (before transforms)? – Ouroborus Jan 20 '22 at 03:39
  • there are hills on the floor with different heights – omega Jan 20 '22 at 03:42
  • In what way do you think this changes the plane's normal? – Ouroborus Jan 20 '22 at 03:43
  • the floor's normal is different based on which (x,y) location you look at. The floor isn't 1 flat surface, it has many bumps. – omega Jan 20 '22 at 03:44
  • You asked for the normal of the plane. Did you actually want the normal of a point on the mesh? – Ouroborus Jan 20 '22 at 03:45
  • Yes its a point on the displacement mesh. But I just mentioned plane since its easier to visualize like a tangent plane to the current bump on the mesh. – omega Jan 20 '22 at 03:52
  • See [Three.js Calculating Vertex Normals](https://stackoverflow.com/questions/29202480/three-js-calculating-vertex-normals) – Ouroborus Jan 20 '22 at 03:53
  • @Ouroborus A bit irrelevant. Displacement works on GPU, so js knows nothing about what happened with vertices there. Thus, normals have to be computed on GPU too. – prisoner849 Jan 20 '22 at 07:20
  • It still applies. See [this question and its answers](https://stackoverflow.com/questions/46696561/get-modified-mesh-displaced-by-displacementmap-in-three-js). – Ouroborus Jan 20 '22 at 08:53
  • @Ouroborus The theme is popular enough on the forum :) https://discourse.threejs.org/t/calculating-normals-from-heightmap-in-vertex-shader/13014/3 – prisoner849 Jan 20 '22 at 09:51
  • @omega See my previous comment to Ouroborus. Also, if you plan to work with Raycaster, have a look at this forum post: https://discourse.threejs.org/t/how-to-draw-a-line-between-points-in-world-space/1743/4 "Displacement" is at js side. The respective jsfiddle already adapted for the using with a buffer geometry. – prisoner849 Jan 20 '22 at 09:53

0 Answers0