Project 21: Audio Visualizer Bars

3D Engineer

Step 1 of 2

Project

Review: useFrame Animation

Animate a bar's scale each frame using a sine wave, like an audio visualizer.

🎯 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 PulsingBar() {
  const ref = useRef();
  useFrame((state) => {
    const scale = 1 + Math.sin(state.clock.elapsedTime * 4) * 0.3;
    ref.current.scale.y = scale;
  });
  return (
    <mesh ref={ref}>
      <boxGeometry args={[0.4, 1, 0.4]} />
      <meshStandardMaterial color="cyan" />
    </mesh>
  );
}

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

← Previous Next →