Live patterns

Three.js Examples with Code

Copy small examples for rotating meshes, particle spheres, and shader planes. Each one highlights a real Three.js concept.

Rotating TorusKnot

Use TorusKnotGeometry to stress-test lighting, normals, roughness, and camera framing with a single expressive mesh.

Torus knots are controlled by radius, tube thickness, tubular segments, radial segments, and the p/q winding values.

const mesh = new THREE.Mesh(
  new THREE.TorusKnotGeometry(0.78, 0.22, 140, 18, 2, 3),
  new THREE.MeshStandardMaterial({
    color: 0x2f8f83,
    roughness: 0.36,
    metalness: 0.16
  })
);
scene.add(mesh);
mesh.rotation.y += 0.01;

Particle Sphere

Build a point cloud with BufferGeometry when you need many small particles without creating hundreds of Mesh objects.

This pattern works for star fields, abstract hero scenes, data points, and lightweight background motion.

const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
const points = new THREE.Points(
  geometry,
  new THREE.PointsMaterial({ size: 0.025 })
);
scene.add(points);

Animated Shader Plane

ShaderMaterial is the cleanest path when a normal material is not enough and you want custom GLSL color logic.

Start with a plane, a uTime uniform, and one visible pattern before adding textures or post-processing.

const material = new THREE.ShaderMaterial({
  uniforms: { uTime: { value: 0 } },
  vertexShader,
  fragmentShader
});
uniforms.uTime.value = time * 0.001;

What to change first

Change one axis at a time: geometry parameters, material roughness, camera distance, light direction, then the animation loop. Small scenes make Three.js bugs easier to isolate.

Search these next

Useful next searches: three.js rotating object, three.js torusknotgeometry, three.js particles example, three.js shader material example, and three.js examples source code.

Rotating Object Particles ShaderMaterial

Three.js example notes

These notes turn the examples into searchable learning anchors instead of isolated demos.

TorusKnotGeometry

A torus knot gives you curved highlights, self-overlap, and a readable silhouette. It is a compact test object for materials and lights.

BufferGeometry particles

Particles should usually share one BufferGeometry and one material. That keeps the scene lighter than many separate meshes.

ShaderMaterial plane

A shader plane is a good first GLSL exercise because UV coordinates are visible, simple, and easy to debug.