How to modify (distort) a geometry

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:

Thanks for any pointers from the Threejs community.

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

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

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.


eXtended eXamples bottom of page

The workaround from mugen87 is no longer necessary since r95.

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

1 Like

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