Lights and Custom Shaders - Three.js - page 242

vUv = uv;
vec3 p = position;
p.z += sin(2.0 * p.y + delta) * 5.0;
p.z += cos(2.0 * p.z + delta / 2.0)

* 5.0;

p.z += cos(2.0 * p.x + delta) * 5.0;
p.x += sin(p.y + delta / 2.0) *

10.0;

vec4 mvPosition = modelViewMatrix *
vec4(scale * p, 1.0 );
gl_Position = projectionMatrix *
mvPosition;
}
</script>

With this shader, we change the location of the vertices by changing the p.z
and the p.x part of its position.

5. At this point, we can just create a geometry and use the material we created
in step 3:

var cubeGeometry = new
THREE.BoxGeometry(5, 5, 5);
var cube = new THREE.Mesh(cubeGeometry,
material);
scene.add(cube);

6. If you look in the shader code in step 4, you can see that the position is influ-
enced by the delta uniform value. We use the render function to pass in a
new value for this uniform:

function render() {
renderer.render(scene, camera);
uniforms.delta.value += 0.01;
requestAnimationFrame(render);

}