# How to make plane geometry vertices position equals to material\`s displacement map?

**URL:** <https://discourse.threejs.org/t/how-to-make-plane-geometry-vertices-position-equals-to-material-s-displacement-map/47936>\
**Category:** Questions\
**Tags:** materials, geometry\
**Created:** [February 12, 2023, 7:56pm UTC](https://discourse.threejs.org/t/how-to-make-plane-geometry-vertices-position-equals-to-material-s-displacement-map/47936 "2023-02-12T19:56:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Torstein](https://avatars.discourse-cdn.com/v4/letter/t/f0a364/32.png) [@Torstein](https://discourse.threejs.org/u/Torstein)\
**Post date:** [February 12, 2023, 7:56pm UTC](https://discourse.threejs.org/t/how-to-make-plane-geometry-vertices-position-equals-to-material-s-displacement-map/47936/1 "2023-02-12T19:56:29Z")

</div>

Hi there!

In my application I want to change plane geometry vertices position by moving mouse over it but still be capable of raycasting on it and get the point on the changed plane.

For now it was done by changing the displacement map texture, which is canvas where user drawing when moving mouse over the plane. But when i`m raycasting on the newly created “mountains” I receive to intersections. After reading other [question](https://discourse.threejs.org/t/how-to-draw-a-line-between-points-in-world-space/1743/4) from forum I understand i need to change vertices positions too. Unfortunately answer from questions is depricated, since _geometry.vertices_ is **no longer in use**.

here is a demo of my current version

> **[three-plain-height-change - CodeSandbox](https://codesandbox.io/s/three-plain-height-change-hvgbnz?file=%2Fsrc%2Findex.js)**
>
> three-plain-height-change by Torstein\_mp29 using dat.gui, parcel-bundler, three

And here is the code how i change displacement map based on canvas element for those how can`t access the demo sandbox.

```javascript
function height2normal(context, contextN) {
      const width = 128;
      const height = 128;

      const src = context.getImageData(0, 0, width, height);
      const dst = contextN.createImageData(width, height);

      for (let i = 0, l = width * height * 4; i < l; i += 4) {
        let x1, x2, y1, y2;

        if (i % (width * 4) === 0) {
          // left edge
          x1 = src.data[i];
          x2 = src.data[i + 4];
        } else if (i % (width * 4) === (width - 1) * 4) {
          // right edge
          x1 = src.data[i - 4];
          x2 = src.data[i];
        } else {
          x1 = src.data[i - 4];
          x2 = src.data[i + 4];
        }

        if (i < width * 4) {
          // top edge
          y1 = src.data[i];
          y2 = src.data[i + width * 4];
        } else if (i > width * (height - 1) * 4) {
          // bottom edge
          y1 = src.data[i - width * 4];
          y2 = src.data[i];
        } else {
          y1 = src.data[i - width * 4];
          y2 = src.data[i + width * 4];
        }

        dst.data[i] = x1 - x2 + 127;
        dst.data[i + 1] = y1 - y2 + 127;
        dst.data[i + 2] = 255;
        dst.data[i + 3] = 255;
      }

      contextN.putImageData(dst, 0, 0);
    }

    // uv - intersection uv, point of intersection on the plane texture 
    function draw(uv) {
      const { scene } = three();
      const canvasD = document.getElementById('canvasD');
      const contextD = canvasD.getContext('2d');
      const canvasN = document.getElementById('canvasN');
      const contextN = canvasN.getContext('2d');
      const plane = scene.getObjectByName('terrain');
      const material = plane.material;

      contextD.fillStyle = '#FFFFFF';
      contextD.fillRect(uv.x * 128, 128 - uv.y * 128, 2, 2);
      material.needsUpdate = true;
      material.displacementMap.needsUpdate = true;
      height2normal(contextD, contextN);
      material.normalMap.needsUpdate = true;
    }

```

Please help me understand how to make geometry vertices positions same value as displacement map has.  
Thank you in advance!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 12, 2023, 8:24pm UTC](https://discourse.threejs.org/t/how-to-make-plane-geometry-vertices-position-equals-to-material-s-displacement-map/47936/2 "2023-02-12T20:24:26Z")

</div>

Hi!

> [@Torstein](#):
>
> After reading other [question](https://discourse.threejs.org/t/how-to-draw-a-line-between-points-in-world-space/1743/4) from forum I understand i need to change vertices positions too. Unfortunately answer from questions is depricated, since _geometry.vertices_ is **no longer in use**.

The respective JSFiddle, in the mentioned post, was updated, and uses BufferGeometry (the code snippet in the post wasn’t updated though)

---

<div class="post-metadata">

**Author:** ![Torstein](https://avatars.discourse-cdn.com/v4/letter/t/f0a364/32.png) [@Torstein](https://discourse.threejs.org/u/Torstein)\
**Post date:** [February 12, 2023, 9:41pm UTC](https://discourse.threejs.org/t/how-to-make-plane-geometry-vertices-position-equals-to-material-s-displacement-map/47936/3 "2023-02-12T21:41:05Z")

</div>

Hi, thank you for answer!  
Thanks for updating the jsFiddle in the prev post, I tried to apply your changes to my sandbox, but now after clicking on the plane, it squeezes it into some strange shape, instead of changing the Y coordinate of vertices. I thought that it a problem of using displacement map and changing positions at the same time, but after removing displacementMap prop from material it didn`t fix the problem.

I updated my sandbox to demonstrate it. Can you please check it?

 ![Screenshot 2023-02-12 at 16.40](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/4/44fa2dea723d76da27cd0d99995370aacfa2574a.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 12, 2023, 9:50pm UTC](https://discourse.threejs.org/t/how-to-make-plane-geometry-vertices-position-equals-to-material-s-displacement-map/47936/4 "2023-02-12T21:50:50Z")

</div>

I would go with this setup:

```javascript
const geometry = new THREE.PlaneGeometry(1, 1, 128, 128).rotateX(-Math.PI * 0.5);
...
//plane.rotation.x = -Math.PI / 2;

```

Rotate the geometry itself, not the mesh.

---

<div class="post-metadata">

**Author:** ![Torstein](https://avatars.discourse-cdn.com/v4/letter/t/f0a364/32.png) [@Torstein](https://discourse.threejs.org/u/Torstein)\
**Post date:** [February 12, 2023, 9:52pm UTC](https://discourse.threejs.org/t/how-to-make-plane-geometry-vertices-position-equals-to-material-s-displacement-map/47936/5 "2023-02-12T21:52:29Z")

</div>

@prisoner849 I have also tested the image from the respective JSFiddle, in the mentioned post, on other sandbox, feels like smth is squeezing my plane mesh after aplying transforming position code

 ![Screenshot 2023-02-12 at 16.47](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/b/7b61263c035510392fb7413a576758ec5d317619.png)

The “mountains” here is like rotated and imprinted into the plane

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 12, 2023, 9:53pm UTC](https://discourse.threejs.org/t/how-to-make-plane-geometry-vertices-position-equals-to-material-s-displacement-map/47936/6 "2023-02-12T21:53:41Z")

</div>

The same issue: you rotate the mesh, whereas you need to rotate the geometry of the plane.

---

<div class="post-metadata">

**Author:** ![Torstein](https://avatars.discourse-cdn.com/v4/letter/t/f0a364/32.png) [@Torstein](https://discourse.threejs.org/u/Torstein)\
**Post date:** [February 12, 2023, 10:12pm UTC](https://discourse.threejs.org/t/how-to-make-plane-geometry-vertices-position-equals-to-material-s-displacement-map/47936/7 "2023-02-12T22:12:27Z")

</div>

Thanks! That was the problem, u helped a lot, thank you!

Can u please share piece of advice what is difference and use-cases of rotating geometry or mesh?