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.

Lighting

Intermediate Three coloured PointLights (red, blue, yellow) orbit a white MeshStandardMaterial sphere, painting dynamic colour onto its surface. Three.js Docs

// White sphere with PBR material
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(0.9, 64, 64),
  new THREE.MeshStandardMaterial({
    color: 0xffffff,
    roughness: 0.25,
    metalness: 0.1
  })
);
scene.add(sphere);

// Three coloured orbiting point lights
const lightDefs = [
  { color: 0xff4433, radius: 2.8 },
  { color: 0x33aaff, radius: 2.8 },
  { color: 0xffcc00, radius: 2.8 },
];

const lights = lightDefs.map({ color, radius } => {
  const light = new THREE.PointLight(color, 3, 10);
  scene.add(light);
  return { light, radius };
});

let t = 0;
function animate() {
  lights.forEach(({ light, radius }, i) => {
    const a = t + (i / 3) * Math.PI * 2;
    light.position.set(
      Math.cos(a) * radius,
      Math.sin(t * 0.6 + i * 1.2) * 0.8,
      Math.sin(a) * radius
    );
  });
  t += 0.016;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}