Interactive 3D Scene

Programmatic 3D scene built with React Three Fiber. Demonstrating real-time animations, custom geometries, and physics-based rendering.

Drag to rotate, scroll to zoom. Hover over the center shape for interaction.

Technical Details

Code Highlights

// Animation loop using useFrame hook
useFrame((state) => {
  if (meshRef.current) {
    meshRef.current.rotation.x += 0.01;
    meshRef.current.rotation.y += 0.005;
    // Sine wave for floating effect
    meshRef.current.position.y =
      Math.sin(state.clock.elapsedTime) * 0.1;
  }
});

React Three Fiber provides declarative 3D with React's component model. The useFrame hook runs on every animation frame at 60fps for smooth real-time updates.