Project 11: Spinning Badge Animation

3D Engineer

Builds on these lessons

Step 1 of 2

Project

Animating with useFrame

useFrame runs on every rendered frame — mutating a ref'd mesh's rotation there is how you animate it smoothly.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

function SpinningBadge() {
  const ref = useRef();
  useFrame((state, delta) => {
    ref.current.rotation.y += delta;
  });
  return (
    <mesh ref={ref}>
      <torusGeometry args={[0.8, 0.3, 16, 32]} />
      <meshStandardMaterial color="gold" />
    </mesh>
  );
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight intensity={0.7} />
      <SpinningBadge />
    </Canvas>
  );
}

← Previous Next →