Shader Learn

08 What Three.js writes for you

onBeforeCompile: rewrite a built-in material’s vertices

Keep Three.js’s lighting and insert one line into the vertex shader.

Drag to rotate
00.5
Explanation

Drag the underlined numbers left and right

// added to the vertex shader of the built-in materialuniform float uTime;   // 0.00uniform float uAmount; // transformed.y += sin(position.x * 5.0 + uTime)               * uAmount;// wireframe
Custom vertex mathAdds deformation to an existing material; normals need matching treatment.

onBeforeCompile inserts vertex code into a built-in material: keep its lighting, change only the shape.

Try it

  • Set the deformation to 0.5
  • Turn on the wireframe: the vertices really move