Project 30: Full 3D Scene Capstone

🎯 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 SpinningKnot() {
  const ref = useRef();
  useFrame((state, delta) => {
    ref.current.rotation.y += delta * 0.5;
  });
  return (
    <mesh ref={ref} castShadow>
      <torusKnotGeometry args={[0.7, 0.25, 100, 16]} />
      <meshStandardMaterial color="mediumpurple" roughness={0.3} metalness={0.6} />
    </mesh>
  );
}

function Particles() {
  const count = 200;
  const positions = new Float32Array(count * 3);
  for (let i = 0; i < count; i++) {
    positions[i * 3] = (Math.random() - 0.5) * 8;
    positions[i * 3 + 1] = (Math.random() - 0.5) * 8;
    positions[i * 3 + 2] = (Math.random() - 0.5) * 8;
  }
  return (
    <Points positions={positions}>
      <PointMaterial size={0.03} color="white" sizeAttenuation transparent />
    </Points>
  );
}

export default function Scene() {
  return (
    <Canvas shadows camera={{ position: [3, 2, 5] }}>
      <ambientLight intensity={0.3} />
      <directionalLight position={[4, 5, 2]} intensity={1.2} castShadow />
      <SpinningKnot />
      <Particles />
      <mesh position={[0, -1.2, 0]} rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
        <planeGeometry args={[10, 10]} />
        <meshStandardMaterial color="#111" />
      </mesh>
      <OrbitControls />
    </Canvas>
  );
}