Up and running in three.js — Part II — Manipulating vertices in three.js

[Post is also available at quaintitative.com]

We had a simple primer on three.js here.

Now, let’s do something a little more fancy, but not overly complicated.

It also gives us a good idea of how to objects are created in three.js and how to manipulate them at the vertice-level.

The code is almost identical to what we have previously. We ..

• set up the scene
• add the camera
• add the renderer
• attach it to the DOM
• add lights
• add spheres
• render and animate

We just do one more step within the animation loop.

sphere_one.geometry.vertices.forEach(function(i){
					var noisy = noise.simplex3(i.x,i.y,i.z)*0.05;
					i.x+=noisy*direction;
					i.y+=noisy*direction;
					i.z+=noisy*direction;
				});

What we are doing here is to run through each of the vertices of the sphere, and add a small noise to its x, y and z position. This causes the sphere to be a jaggy blob.

We also make one more small change here, which is to check the time elapsed since the start, and change the direction of the noise when it hits 100.

if (Math.floor(clock.getElapsedTime())%100==0){
					direction*=-1;
				};

The full code is here.