Three.js Demos
Three.js Demos

Three.js Torus Knot Geometry Demo

Interactive torus knot geometry demo showcasing Three.js TorusKnotGeometry with parametric generation, animation, and standard PBR material shading.

Key topics: torus knot, three.js torus knot, torusknotgeometry, three js torus knot, torus knots, three.js geometry, parametric geometry

What this code does

- Three.js TorusKnotGeometry: parametrically generated complex 3D knot using mathematical p and q parameters for varied topology.
- Torus Knot Animation: continuous mesh rotation reveals intricate geometric structure under dynamic directional lighting.
- Parametric Geometry: demonstrates Three.js built-in parametric shapes with customizable complexity and smoothness.
- PBR Material Shading: MeshStandardMaterial with realistic lighting response showcases geometry surface details.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)
document.querySelector('#app').appendChild(renderer.domElement)
const mesh = new THREE.Mesh(
  new THREE.TorusKnotGeometry(0.7, 0.25, 128, 32),
  new THREE.MeshStandardMaterial({ color: 0x00aaff })
)
scene.add(mesh)

function animate () {
  requestAnimationFrame(animate)
  mesh.rotation.x += 0.01
  mesh.rotation.y += 0.01
  renderer.render(scene, camera)
}
animate()
← Back