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.

Materials

Intermediate Five materials compared on identical spheres — Basic (no lighting), Normal, Lambert, Phong, and Standard (PBR). Three.js Docs

●Basic🌈Normal●Lambert●Phong●Standard

// Lighting required for shaded materials
scene.add(new THREE.AmbientLight(0xffffff, 0.3));
const dir = new THREE.DirectionalLight(0xffffff, 2);
dir.position.set(4, 6, 5);
scene.add(dir);

const sphereGeo = new THREE.SphereGeometry(0.48, 64, 64);

const materials = [
  new THREE.MeshBasicMaterial({ color: 0xef4444 }),
  new THREE.MeshNormalMaterial(),
  new THREE.MeshLambertMaterial({ color: 0x22d3ee }),
  new THREE.MeshPhongMaterial({
    color: 0xf59e0b,
    shininess: 120
  }),
  new THREE.MeshStandardMaterial({
    color: 0xa855f7,
    metalness: 0.3,
    roughness: 0.35
  }),
];

materials.forEach((mat, i) => {
  const mesh = new THREE.Mesh(sphereGeo, mat);
  mesh.position.x = (i - 2) * 1.1;
  scene.add(mesh);
});