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.

Geometries

Beginner Six built-in Three.js geometries — Box, Sphere, Cone, Cylinder, Torus, and Icosahedron — each with MeshNormalMaterial. Three.js Docs

const geos = [
  new THREE.BoxGeometry(0.8, 0.8, 0.8),
  new THREE.SphereGeometry(0.5, 32, 32),
  new THREE.ConeGeometry(0.45, 0.9, 32),
  new THREE.CylinderGeometry(0.32, 0.32, 0.85, 32),
  new THREE.TorusGeometry(0.38, 0.14, 16, 64),
  new THREE.IcosahedronGeometry(0.52, 1),
];

const positions = [
  [-1.6,  0.75, 0], [0,  0.75, 0], [1.6,  0.75, 0],
  [-1.6, -0.75, 0], [0, -0.75, 0], [1.6, -0.75, 0],
];

const meshes = geos.map((geo, i) => {
  const mesh = new THREE.Mesh(
    geo,
    new THREE.MeshNormalMaterial()
  );
  mesh.position.set(...positions[i]);
  scene.add(mesh);
  return mesh;
});

function animate() {
  meshes.forEach(m => {
    m.rotation.x += 0.006;
    m.rotation.y += 0.010;
  });
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}