# Find intersection point with a terrain (created with height map)

**URL:** <https://discourse.threejs.org/t/find-intersection-point-with-a-terrain-created-with-height-map/48499>\
**Category:** Questions\
**Tags:** raycaster, height-map\
**Created:** [February 27, 2023, 5:12pm UTC](https://discourse.threejs.org/t/find-intersection-point-with-a-terrain-created-with-height-map/48499 "2023-02-27T17:12:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hesamoy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hesamoy/32/3743_2.png) [@hesamoy](https://discourse.threejs.org/u/hesamoy)\
**Post date:** [February 27, 2023, 5:12pm UTC](https://discourse.threejs.org/t/find-intersection-point-with-a-terrain-created-with-height-map/48499/1 "2023-02-27T17:12:36Z")

</div>

Hello, I want to raycast into a terrain (a plane with height map), however, the intersection point is logged as is on a flat plane other than a terrain. Part of my code is as follows:

```
const disMap = new THREE.TextureLoader().load(heightMap)
const material = new THREE.MeshStandardMaterial({
   side: THREE.FrontSide,
   displacementMap: disMap,
   displacementScale: disScale
})

const terrainGeom = new THREE.PlaneGeometry(sizeX, sizeY, widthSeg, depthSeg);
const terrainMesh = new THREE.Mesh(terrainGeom, material);
scene.add(terrainMesh);

document.addEventListener('mousedown',onMouseClick);
function onMouseClick(evt) {

  var rayCaster = new THREE.Raycaster();
  var mousePosition = new THREE.Vector2();
  var canvas = renderer.domElement;
  var canvasPosition = canvas.getBoundingClientRect();

  evt.preventDefault();

  mousePosition.x = ((evt.clientX - canvasPosition.left) / canvas.width) * 2 - 1;
  mousePosition.y = -((evt.clientY - canvasPosition.top) / canvas.height) * 2 + 1;

  rayCaster.setFromCamera(mousePosition, camera);
  var intersects = rayCaster.intersectObjects(lineObject, true);

  if (intersects.length > 0)
       console.log(intersects[0].point);
}

```

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [February 27, 2023, 6:04pm UTC](https://discourse.threejs.org/t/find-intersection-point-with-a-terrain-created-with-height-map/48499/2 "2023-02-27T18:04:51Z")

</div>

The displacement map is processed in the GPU, until then the object is practically flat. The raycaster works in a much earlier stage, so it sees the object as flat.

I’m not sure what is the best way to resolve this, but if I were you, I will modify the vertices in the plane in JS, before raycasting.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [February 27, 2023, 6:19pm UTC](https://discourse.threejs.org/t/find-intersection-point-with-a-terrain-created-with-height-map/48499/3 "2023-02-27T18:19:37Z")

</div>

Have a look at [this](https://discourse.threejs.org/t/how-to-draw-a-line-between-points-in-world-space/1743/4) answer