TORUS KNOT
THREE.JS GUIDE

Learn how to draw complex 3D shapes in Three.js with a clean step-by-step approach.

Three.js Torus Knot Example

Frequently Asked Questions

What is a torus knot in Three.js?

A torus knot is a mathematical 3D shape created with THREE.TorusKnotGeometry. It looks like a twisted tube wrapped around itself. You control its radius, tube thickness, number of radial segments, tubular segments, and the p/q winding numbers that determine how many times it wraps.

How do I create a torus knot in Three.js?

Use new THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q) to create the geometry, combine it with a material like MeshStandardMaterial, then create a Mesh and add it to the scene. The p and q parameters control the knot's winding pattern.

What are the p and q parameters in TorusKnotGeometry?

The p parameter controls how many times the curve winds around the axis of rotational symmetry. The q parameter controls how many times the curve winds around a circle in the interior of the torus. Common values like p=2, q=3 create a trefoil knot.

Can I animate a torus knot in Three.js?

Yes. You can rotate it continuously using mesh.rotation.x += 0.01 in your animation loop, or animate its material properties (color, emissive, opacity) over time. You can also morph between different p/q values by recreating the geometry each frame.

What is a Torus Knot?

A Torus Knot is a complex 3D mathematical shape that wraps around the surface of a torus (a donut-shaped object) in a spiraling, intertwined pattern. Unlike a simple torus, which forms a smooth circular ring, a torus knot loops around itself multiple times, creating a more intricate and visually interesting structure.

In Three.js, a Torus Knot is generated using the built-in TorusKnotGeometry class. This allows developers to quickly create advanced procedural shapes without manually defining vertices. By adjusting parameters like radius, tube thickness, and segment count, you can create a wide variety of knot styles and levels of detail.

Torus knots are often used in 3D graphics, game development, and visual demos because they showcase lighting, shading, and animation beautifully. They’re also a great way for beginners to move beyond basic shapes like cubes and spheres and start working with more advanced geometry in Three.js.

LIVE DEMO

The glowing torus knot behind this page is the live demo. Click and drag anywhere to orbit the camera around it. Scroll to keep reading — the shape follows you down the page.

Gaming Supplies on Amazon

Shop great deals on gaming supplies and accessories on Amazon. As an Amazon Associate I earn from qualifying purchases.

Step 1: Create Scene

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

Step 2: Create Torus Knot

const geometry = new THREE.TorusKnotGeometry(2, 0.6, 100, 16);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Step 3: Add Lighting

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

scene.add(new THREE.AmbientLight(0xffffff, 0.4));

Step 4: Animate

camera.position.z = 8;

function animate() {
  requestAnimationFrame(animate);

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

Full Working Code (Copy & Paste)

torus-knot-threejs.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three.js Torus Knot</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>

  <style>
    body {
      margin: 0;
      background: #0f172a;
      overflow: hidden;
    }
  </style>
</head>

<body>

<script>
// Scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0f172a);

// Camera
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 6;

// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// Torus Knot
const geometry = new THREE.TorusKnotGeometry(2, 0.6, 150, 32);

const material = new THREE.MeshStandardMaterial({
  color: 0x2ad1d6,
  metalness: 0.7,
  roughness: 0.25
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Lighting
const ambient = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambient);

const light = new THREE.PointLight(0x2ad1d6, 2);
light.position.set(5, 5, 5);
scene.add(light);

// Animation
function animate() {
  requestAnimationFrame(animate);

  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

// Resize Handling
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>

</body>
</html>
â–¶ PLAY MORE 3D GAMES

More 3D Projects