How to modify (distort) a geometry

Questions
,
1

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/

Thanks for any pointers from the Threejs community.

2
3

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

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

4

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

there
eXtended eXamples bottom of page

http://threejs.hofk.de/modifyGeo/modifyGeo.html

Note!
The workaround from mugen87 is no longer necessary since r95.

5

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

1 Like
6

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

1 Like