← All elements

Torus Knot

Geometry

A glossy metallic torus knot tumbling on two axes.

Usage
Install: three @react-three/fiber @react-three/drei
Drop <TorusKnot /> inside your own <Canvas>.
Mood
Sleek, kinetic, hi-tech.
Colors
Cyan chrome under neon key lights on dark.
Motion
Continuous dual-axis rotation.
View component source
import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import type { Mesh } from 'three';

export default function TorusKnot({ color = '#22e0ff', scale = 1 }: { color?: string; scale?: number }) {
  const ref = useRef<Mesh>(null);
  useFrame((_, dt) => {
    if (!ref.current) return;
    ref.current.rotation.x += dt * 0.4;
    ref.current.rotation.y += dt * 0.25;
  });
  return (
    <mesh ref={ref} scale={scale}>
      <torusKnotGeometry args={[0.8, 0.28, 220, 32]} />
      <meshPhysicalMaterial
        color={color}
        metalness={1}
        roughness={0.15}
        iridescence={1}
        iridescenceIOR={1.3}
        emissive={color}
        emissiveIntensity={0.2}
      />
    </mesh>
  );
}