A glossy metallic torus knot tumbling on two axes.
three @react-three/fiber @react-three/drei<TorusKnot /> inside your own <Canvas>.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>
);
}