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.

Animation

Intermediate Three objects animating independently — rotation, vertical sine-wave oscillation, and pulse scaling driven by requestAnimationFrame. Three.js Docs

const meshes = [
  new THREE.Mesh(
    new THREE.TorusKnotGeometry(0.42, 0.15, 100, 16),
    new THREE.MeshNormalMaterial()
  ),
  new THREE.Mesh(
    new THREE.OctahedronGeometry(0.6),
    new THREE.MeshNormalMaterial()
  ),
  new THREE.Mesh(
    new THREE.IcosahedronGeometry(0.5, 1),
    new THREE.MeshNormalMaterial()
  ),
];

meshes.forEach((m, i) => {
  m.position.x = (i - 1) * 2;
  scene.add(m);
});

let t = 0;
function animate() {
  t += 0.012;
  meshes.forEach((m, i) => {
    // spin at different rates
    m.rotation.x = t * (0.5 + i * 0.2);
    m.rotation.y = t * (0.8 + i * 0.3);
    // vertical oscillation
    m.position.y = Math.sin(t + (i * Math.PI * 2) / 3) * 0.5;
    // pulse scale
    m.scale.setScalar(1 + Math.sin(t * 1.5 + i) * 0.15);
  });
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}