Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

239
Views
How to get vector perpendicular to the displacement map plane in three.js?

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

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!