Three.js Torus Knot Geometry
Interactive torus knot geometry demo showcasing Three.js TorusKnotGeometry with parametric generation, animation, and standard PBR material shading.
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.
JavaScript (plain)
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)