# How to modify (distort) a geometry

**URL:** <https://discourse.threejs.org/t/how-to-modify-distort-a-geometry/9097>\
**Category:** Questions\
**Tags:** getting-started, geometry\
**Created:** [August 17, 2019, 3:45am UTC](https://discourse.threejs.org/t/how-to-modify-distort-a-geometry/9097 "2019-08-17T03:45:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bob1942](https://avatars.discourse-cdn.com/v4/letter/b/ecae2f/32.png) [@bob1942](https://discourse.threejs.org/u/bob1942)\
**Post date:** [August 17, 2019, 3:45am UTC](https://discourse.threejs.org/t/how-to-modify-distort-a-geometry/9097/1 "2019-08-17T03:45:31Z")

</div>

I would appreciate some directions into the threejs documentation that help me understand how to modify a standard mesh object by changing the vertices and related items (e.g. normals).

Here’s my simple goal:  
Let’s say I have a PlaneBufferGeometry(w, h, wSegs, hSegs) object where the width and height (w, h) and number of segments are not small numbers. Further, say the plane lies in the x-y coordinate plane and I want to modify the surface z(x,y) to simulate, for example, wave action.

From limited experience in another context, I recall the need to access the vertices and perhaps recalculate the associated normals. I’m having a problem finding examples or documentation on this in books or online about threejs. Here’s a link to this topic in a C++ environment:  
[https://openframeworks.cc/documentation/3d/ofMesh/](https://openframeworks.cc/documentation/3d/ofMesh/)

Thanks for any pointers from the Threejs community.

---

<div class="post-metadata">

**Author:** ![EliasHasle](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliashasle/32/3010_2.png) [@EliasHasle](https://discourse.threejs.org/u/EliasHasle)\
**Post date:** [August 17, 2019, 7:36am UTC](https://discourse.threejs.org/t/how-to-modify-distort-a-geometry/9097/2 "2019-08-17T07:36:56Z")

</div>

> <https://stackoverflow.com/questions/27198525/three-js-what-is-planebuffergeometry/48042492#48042492>

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 17, 2019, 9:01am UTC](https://discourse.threejs.org/t/how-to-modify-distort-a-geometry/9097/3 "2019-08-17T09:01:17Z")

</div>

Here is also a live example that demonstrates the modification of a plane geometry.

[https://jsfiddle.net/h4oytk1a/1/](https://jsfiddle.net/h4oytk1a/1/)

Besides, the documentation page provides some basic information about the class and the way it represents geometry data.

[https://threejs.org/docs/index.html#api/en/core/BufferGeometry](https://threejs.org/docs/index.html#api/en/core/BufferGeometry)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [August 17, 2019, 9:43am UTC](https://discourse.threejs.org/t/how-to-modify-distort-a-geometry/9097/4 "2019-08-17T09:43:24Z")

</div>

A more complex modification of a geometry. The BufferGeometry is described as a script  
src=“geo.js” !-- defines a indexed BufferGeometry geo –  
and can be exchanged.

See

> [@Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315):
>
> The answers to some questions contain some very interesting and instructive basic examples. These are difficult to find in the large number of questions on discourse.There are also good examples in resources and showcase. Therefore I collected them and put them on one page, clearly arranged by time. The collection may be a help for beginners. slightly_smiling_face UPDATE 2019 [http://discourse.threejs.hofk.de/](http://discourse.threejs.hofk.de/) is now redirected to the safe side [\* discourse.threejs.hofk.de](https://hofk.de/main/discourse.threejs/) UPDATE 202…

there  
[eXtended eXamples](http://discourse.threejs.hofk.de/2018/Xindex2018.html) bottom of page

[http://threejs.hofk.de/modifyGeo/modifyGeo.html](http://threejs.hofk.de/modifyGeo/modifyGeo.html)

_Note!_  
_The workaround from mugen87 is no longer necessary since r95._

---

<div class="post-metadata">

**Author:** ![bob1942](https://avatars.discourse-cdn.com/v4/letter/b/ecae2f/32.png) [@bob1942](https://discourse.threejs.org/u/bob1942)\
**Post date:** [August 17, 2019, 6:34pm UTC](https://discourse.threejs.org/t/how-to-modify-distort-a-geometry/9097/5 "2019-08-17T18:34:15Z")

</div>

Wow! Thanks so much for the information. I will dig into all these resources.

---

<div class="post-metadata">

**Author:** ![bob1942](https://avatars.discourse-cdn.com/v4/letter/b/ecae2f/32.png) [@bob1942](https://discourse.threejs.org/u/bob1942)\
**Post date:** [August 19, 2019, 12:47am UTC](https://discourse.threejs.org/t/how-to-modify-distort-a-geometry/9097/6 "2019-08-19T00:47:42Z")

</div>

In addition to the above references, I find these two articles helpful:

> **[Three.js Custom Geometry](https://threejsfundamentals.org/threejs/lessons/threejs-custom-geometry.html)**
>
> How to make your own geometry.

> **[Three.js Custom BufferGeometry](https://threejsfundamentals.org/threejs/lessons/threejs-custom-buffergeometry.html)**
>
> How to make your own BufferGeometry.