Code

Three.js

Hello Cube

Scene, PerspectiveCamera, WebGLRenderer, and a rotating cube — the Three.js hello-world.

Geometries

Six built-in geometries (Box, Sphere, Cone, Cylinder, Torus, Icosahedron) spinning with MeshNormalMaterial.

Materials

Basic, Normal, Lambert, Phong, and Standard materials compared side-by-side on identical spheres.

Lighting

Three coloured PointLights orbiting a white PBR sphere — AmbientLight, PointLight, and dynamic colour mixing.

Animation

Three objects animating with independent rotation, vertical sine oscillation, and pulse scaling.

Particle System

3 000 particles in a BufferGeometry — each bouncing inside a volume, uploaded to the GPU every frame.

Shader Material

Custom GLSL vertex and fragment shaders — sine-wave vertex displacement with animated RGB colour cycling.

Generative Art

Noise-displaced icosphere with per-vertex colour cycling — organic 3D generative art from layered trig noise.

Shader Material

Advanced Custom GLSL vertex and fragment shaders via ShaderMaterial — the vertex shader displaces a plane with sine-wave noise; the fragment shader cycles RGB from vertex position and a uTime uniform. Three.js Docs

const uniforms = { uTime: { value: 0 } };

const material = new THREE.ShaderMaterial({
  uniforms,
  vertexShader: `
    uniform float uTime;
    varying vec3 vPosition;
    void main() {
      vPosition = position;
      vec3 pos = position;
      float wave =
        sin(pos.x * 2.8 + uTime) * 0.22 +
        cos(pos.y * 2.2 + uTime * 0.9) * 0.18;
      pos.z += wave;
      gl_Position =
        projectionMatrix * modelViewMatrix *
        vec4(pos, 1.0);
    }
  `,
  fragmentShader: `
    uniform float uTime;
    varying vec3 vPosition;
    void main() {
      float r = 0.5 + 0.5 * sin(vPosition.x * 1.8 + uTime);
      float g = 0.5 + 0.5 * sin(vPosition.y * 1.8 + uTime * 1.3);
      float b = 0.5 + 0.5 * sin(vPosition.z * 6.0 + uTime * 0.7);
      gl_FragColor = vec4(r, g, b, 1.0);
    }
  `,
  side: THREE.DoubleSide
});

function animate() {
  uniforms.uTime.value += 0.015;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}