Creating Immersive 3D Web Experiences with Three.js

// SceneManager.ts
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export class SceneManager {
  private scene: THREE.Scene;
  private camera: THREE.PerspectiveCamera;
  private renderer: THREE.WebGLRenderer;
  private controls: OrbitControls;
  private animationId: number | null = null;

  constructor(canvas: HTMLCanvasElement) {
    // Initialize scene
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xf0f0f0);

    // Setup camera
    this.camera = new THREE.PerspectiveCamera(
      75, // Field of view
      canvas.clientWidth / canvas.clientHeight, // Aspect ratio
      0.1, // Near clipping plane
      1000 // Far clipping plane
    );
    this.camera.position.set(5, 5, 5);

    // Initialize renderer
    this.renderer = new THREE.WebGLRenderer({ 
      canvas, 
      antialias: true,
      alpha: true 
    });
    this.renderer.setSize(canvas.clientWidth, canvas.clientHeight);
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    
    // Enable shadows for realism
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    // Add orbit controls
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls.enableDamping = true;
    this.controls.dampingFactor = 0.05;

    this.setupLighting();
    this.animate();
  }

  private setupLighting(): void {
    // Ambient light for overall illumination
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
    this.scene.add(ambientLight);

    // Directional light for shadows and depth
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(10, 10, 5);
    directionalLight.castShadow = true;
    
    // Shadow camera settings
    directionalLight.shadow.mapSize.width = 2048;
    directionalLight.shadow.mapSize.height = 2048;
    directionalLight.shadow.camera.near = 0.5;
    directionalLight.shadow.camera.far = 50;
    
    this.scene.add(directionalLight);
  }

  public addMesh(mesh: THREE.Mesh): void {
    this.scene.add(mesh);
  }

  private animate = (): void => {
    this.animationId = requestAnimationFrame(this.animate);
    
    this.controls.update();
    this.renderer.render(this.scene, this.camera);
  };

  public dispose(): void {
    if (this.animationId) {
      cancelAnimationFrame(this.animationId);
    }
    this.renderer.dispose();
    this.controls.dispose();
  }
}

// InteractiveObject.ts
export class InteractiveObject {
  public mesh: THREE.Mesh;
  private originalScale: THREE.Vector3;
  private isHovered: boolean = false;
  private isAnimating: boolean = false;

  constructor(geometry: THREE.BufferGeometry, material: THREE.Material) {
    this.mesh = new THREE.Mesh(geometry, material);
    this.originalScale = this.mesh.scale.clone();
    
    // Enable shadow casting and receiving
    this.mesh.castShadow = true;
    this.mesh.receiveShadow = true;
  }

  public onHover(): void {
    if (this.isAnimating || this.isHovered) return;
    
    this.isHovered = true;
    this.animateScale(this.originalScale.clone().multiplyScalar(1.1));
  }

  public onLeave(): void {
    if (this.isAnimating || !this.isHovered) return;
    
    this.isHovered = false;
    this.animateScale(this.originalScale);
  }

  public onClick(): void {
    if (this.isAnimating) return;
    
    // Pulse animation on click
    const pulseScale = this.originalScale.clone().multiplyScalar(1.2);
    this.animateScale(pulseScale, 200, () => {
      this.animateScale(this.originalScale, 200);
    });
  }

  private animateScale(
    targetScale: THREE.Vector3, 
    duration: number = 300,
    onComplete?: () => void
  ): void {
    this.isAnimating = true;
    const startScale = this.mesh.scale.clone();
    const startTime = performance.now();

    const animate = (currentTime: number) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      
      // Easing function for smooth animation
      const eased = this.easeOutQuart(progress);
      
      this.mesh.scale.lerpVectors(startScale, targetScale, eased);

      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        this.isAnimating = false;
        if (onComplete) onComplete();
      }
    };

    requestAnimationFrame(animate);
  }

  private easeOutQuart(t: number): number {
    return 1 - Math.pow(1 - t, 4);
  }
}

// Usage in React component
export const Interactive3DScene: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const sceneManagerRef = useRef<SceneManager | null>(null);
  const raycasterRef = useRef<THREE.Raycaster>(new THREE.Raycaster());
  const mouseRef = useRef<THREE.Vector2>(new THREE.Vector2());
  const objectsRef = useRef<InteractiveObject[]>([]);

  useEffect(() => {
    if (!canvasRef.current) return;

    const sceneManager = new SceneManager(canvasRef.current);
    sceneManagerRef.current = sceneManager;

    // Create interactive objects
    const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
    const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
    const interactiveCube = new InteractiveObject(cubeGeometry, cubeMaterial);
    
    sceneManager.addMesh(interactiveCube.mesh);
    objectsRef.current.push(interactiveCube);

    return () => {
      sceneManager.dispose();
    };
  }, []);

  const handleMouseMove = (event: React.MouseEvent<HTMLCanvasElement>) => {
    if (!canvasRef.current || !sceneManagerRef.current) return;

    const rect = canvasRef.current.getBoundingClientRect();
    mouseRef.current.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
    mouseRef.current.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

    raycasterRef.current.setFromCamera(
      mouseRef.current, 
      sceneManagerRef.current.camera
    );

    const intersects = raycasterRef.current.intersectObjects(
      objectsRef.current.map(obj => obj.mesh)
    );

    // Reset all objects
    objectsRef.current.forEach(obj => obj.onLeave());

    // Highlight intersected object
    if (intersects.length > 0) {
      const intersectedObject = objectsRef.current.find(
        obj => obj.mesh === intersects[0].object
      );
      intersectedObject?.onHover();
    }
  };

  return (
    <canvas
      ref={canvasRef}
      onMouseMove={handleMouseMove}
      className="w-full h-96 rounded-lg"
    />
  );
};

// LODManager.ts
export class LODManager {
  private lod: THREE.LOD;
  private camera: THREE.Camera;

  constructor(camera: THREE.Camera) {
    this.camera = camera;
    this.lod = new THREE.LOD();
  }

  public createLODObject(
    highDetailGeometry: THREE.BufferGeometry,
    material: THREE.Material,
    distances: number[] = [0, 50, 100]
  ): THREE.LOD {
    const lod = new THREE.LOD();

    // High detail version (close distance)
    const highDetailMesh = new THREE.Mesh(highDetailGeometry, material);
    lod.addLevel(highDetailMesh, distances[0]);

    // Medium detail version
    const mediumDetailGeometry = this.simplifyGeometry(highDetailGeometry, 0.5);
    const mediumDetailMesh = new THREE.Mesh(mediumDetailGeometry, material);
    lod.addLevel(mediumDetailMesh, distances[1]);

    // Low detail version (far distance)
    const lowDetailGeometry = this.simplifyGeometry(highDetailGeometry, 0.1);
    const lowDetailMesh = new THREE.Mesh(lowDetailGeometry, material);
    lod.addLevel(lowDetailMesh, distances[2]);

    return lod;
  }

  private simplifyGeometry(
    geometry: THREE.BufferGeometry, 
    ratio: number
  ): THREE.BufferGeometry {
    // Simplified geometry creation
    // In production, use libraries like three-mesh-bvh or simplify-js
    const simplified = geometry.clone();
    const positions = simplified.getAttribute('position');
    const newPositions = new Float32Array(positions.count * ratio * 3);
    
    // Implement decimation algorithm here
    // This is a simplified example
    for (let i = 0; i < newPositions.length; i += 3) {
      const sourceIndex = Math.floor((i / 3) / ratio) * 3;
      newPositions[i] = positions.getX(sourceIndex / 3);
      newPositions[i + 1] = positions.getY(sourceIndex / 3);
      newPositions[i + 2] = positions.getZ(sourceIndex / 3);
    }
    
    simplified.setAttribute('position', new THREE.BufferAttribute(newPositions, 3));
    return simplified;
  }

  public update(): void {
    this.lod.update(this.camera);
  }
}

// InstancedRenderer.ts
export class InstancedRenderer {
  private instancedMesh: THREE.InstancedMesh;
  private dummy: THREE.Object3D;

  constructor(
    geometry: THREE.BufferGeometry,
    material: THREE.Material,
    count: number
  ) {
    this.instancedMesh = new THREE.InstancedMesh(geometry, material, count);
    this.dummy = new THREE.Object3D();
    
    // Enable shadows for instances
    this.instancedMesh.castShadow = true;
    this.instancedMesh.receiveShadow = true;
    
    this.generateInstances(count);
  }

  private generateInstances(count: number): void {
    for (let i = 0; i < count; i++) {
      // Random positioning
      this.dummy.position.set(
        (Math.random() - 0.5) * 100,
        (Math.random() - 0.5) * 100,
        (Math.random() - 0.5) * 100
      );

      // Random rotation
      this.dummy.rotation.set(
        Math.random() * Math.PI,
        Math.random() * Math.PI,
        Math.random() * Math.PI
      );

      // Random scale
      const scale = 0.5 + Math.random() * 0.5;
      this.dummy.scale.setScalar(scale);

      this.dummy.updateMatrix();
      this.instancedMesh.setMatrixAt(i, this.dummy.matrix);

      // Optional: Set per-instance color
      const color = new THREE.Color();
      color.setHSL(Math.random(), 0.7, 0.5);
      this.instancedMesh.setColorAt(i, color);
    }

    this.instancedMesh.instanceMatrix.needsUpdate = true;
    if (this.instancedMesh.instanceColor) {
      this.instancedMesh.instanceColor.needsUpdate = true;
    }
  }

  public animateInstances(): void {
    const time = performance.now() * 0.001;
    
    for (let i = 0; i < this.instancedMesh.count; i++) {
      this.instancedMesh.getMatrixAt(i, this.dummy.matrix);
      this.dummy.matrix.decompose(this.dummy.position, this.dummy.quaternion, this.dummy.scale);
      
      // Animate rotation
      this.dummy.rotation.x += 0.01;
      this.dummy.rotation.y += 0.02;
      
      // Animate position with sine wave
      this.dummy.position.y += Math.sin(time + i * 0.1) * 0.01;
      
      this.dummy.updateMatrix();
      this.instancedMesh.setMatrixAt(i, this.dummy.matrix);
    }
    
    this.instancedMesh.instanceMatrix.needsUpdate = true;
  }

  public getMesh(): THREE.InstancedMesh {
    return this.instancedMesh;
  }
}

// ProductConfigurator.tsx
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, Environment, ContactShadows } from '@react-three/drei';
import { useState, useRef } from 'react';
import * as THREE from 'three';

interface ProductMeshProps {
  color: string;
  material: 'wood' | 'metal' | 'fabric';
  onHover: (hovered: boolean) => void;
}

const ProductMesh: React.FC<ProductMeshProps> = ({ color, material, onHover }) => {
  const meshRef = useRef<THREE.Mesh>(null);
  const [hovered, setHovered] = useState(false);

  useFrame((state) => {
    if (meshRef.current) {
      meshRef.current.rotation.y = Math.sin(state.clock.elapsedTime) * 0.1;
      meshRef.current.scale.setScalar(hovered ? 1.05 : 1);
    }
  });

  const getMaterial = () => {
    const baseColor = new THREE.Color(color);
    
    switch (material) {
      case 'wood':
        return (
          <meshStandardMaterial
            color={baseColor}
            roughness={0.8}
            metalness={0.1}
          />
        );
      case 'metal':
        return (
          <meshStandardMaterial
            color={baseColor}
            roughness={0.1}
            metalness={0.9}
          />
        );
      case 'fabric':
        return (
          <meshLambertMaterial
            color={baseColor}
          />
        );
      default:
        return <meshStandardMaterial color={baseColor} />;
    }
  };

  return (
    <mesh
      ref={meshRef}
      onPointerEnter={() => {
        setHovered(true);
        onHover(true);
      }}
      onPointerLeave={() => {
        setHovered(false);
        onHover(false);
      }}
      castShadow
      receiveShadow
    >
      <boxGeometry args={[2, 2, 2]} />
      {getMaterial()}
    </mesh>
  );
};

export const ProductConfigurator: React.FC = () => {
  const [selectedColor, setSelectedColor] = useState('#ff6b6b');
  const [selectedMaterial, setSelectedMaterial] = useState<'wood' | 'metal' | 'fabric'>('wood');
  const [isHovered, setIsHovered] = useState(false);

  const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7'];
  const materials: ('wood' | 'metal' | 'fabric')[] = ['wood', 'metal', 'fabric'];

  return (
    <div className="w-full h-96 relative">
      <Canvas
        camera={{ position: [5, 5, 5], fov: 50 }}
        shadows
        className="rounded-lg"
      >
        <ambientLight intensity={0.4} />
        <directionalLight
          position={[10, 10, 5]}
          intensity={1}
          castShadow
          shadow-mapSize-width={2048}
          shadow-mapSize-height={2048}
        />
        
        <ProductMesh
          color={selectedColor}
          material={selectedMaterial}
          onHover={setIsHovered}
        />
        
        <ContactShadows
          rotation-x={Math.PI / 2}
          position={[0, -1.4, 0]}
          opacity={0.75}
          width={10}
          height={10}
          blur={2.5}
          far={4}
        />
        
        <Environment preset="city" />
        <OrbitControls enablePan={false} maxPolarAngle={Math.PI / 2} />
      </Canvas>
      
      {/* Configuration UI */}
      <div className="absolute top-4 left-4 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
        <h4 className="font-semibold mb-3">Customize Product</h4>
        
        <div className="mb-3">
          <label className="block text-sm font-medium mb-2">Color</label>
          <div className="flex gap-2">
            {colors.map((color) => (
              <button
                key={color}
                onClick={() => setSelectedColor(color)}
                className={`w-8 h-8 rounded-full border-2 ${
                  selectedColor === color ? 'border-gray-800' : 'border-gray-300'
                }`}
                style={{ backgroundColor: color }}
              />
            ))}
          </div>
        </div>
        
        <div>
          <label className="block text-sm font-medium mb-2">Material</label>
          <select
            value={selectedMaterial}
            onChange={(e) => setSelectedMaterial(e.target.value as 'wood' | 'metal' | 'fabric')}
            className="w-full p-2 border border-gray-300 rounded-md"
          >
            {materials.map((material) => (
              <option key={material} value={material}>
                {material.charAt(0).toUpperCase() + material.slice(1)}
              </option>
            ))}
          </select>
        </div>
        
        {isHovered && (
          <div className="mt-3 text-sm text-blue-600">
            Click and drag to rotate!
          </div>
        )}
      </div>
    </div>
  );
};

// PerformanceMonitor.ts
export class PerformanceMonitor {
  private stats: any;
  private frameCount: number = 0;
  private lastTime: number = performance.now();
  private fpsHistory: number[] = [];
  private memoryHistory: number[] = [];

  constructor() {
    // Initialize stats.js for real-time monitoring
    this.stats = new Stats();
    this.stats.showPanel(0); // 0: fps, 1: ms, 2: mb
    document.body.appendChild(this.stats.dom);
    
    this.monitorPerformance();
  }

  private monitorPerformance(): void {
    const monitor = () => {
      this.stats.begin();
      
      // Measure frame rate
      const currentTime = performance.now();
      const deltaTime = currentTime - this.lastTime;
      const fps = 1000 / deltaTime;
      
      this.fpsHistory.push(fps);
      if (this.fpsHistory.length > 60) {
        this.fpsHistory.shift();
      }

      // Monitor memory usage (if available)
      if ('memory' in performance) {
        const memoryInfo = (performance as any).memory;
        this.memoryHistory.push(memoryInfo.usedJSHeapSize / 1048576); // Convert to MB
        if (this.memoryHistory.length > 60) {
          this.memoryHistory.shift();
        }
      }

      // Check for performance issues
      if (fps < 30) {
        console.warn('Low FPS detected:', fps.toFixed(2));
        this.triggerOptimization();
      }

      this.lastTime = currentTime;
      this.frameCount++;
      
      this.stats.end();
      requestAnimationFrame(monitor);
    };
    
    requestAnimationFrame(monitor);
  }

  private triggerOptimization(): void {
    // Implement dynamic quality reduction
    // This could involve:
    // - Reducing shadow quality
    // - Decreasing texture resolution
    // - Simplifying geometry
    // - Reducing particle counts
    
    console.log('Applying performance optimizations...');
  }

  public getAverageFPS(): number {
    return this.fpsHistory.reduce((a, b) => a + b, 0) / this.fpsHistory.length;
  }

  public getMemoryUsage(): number {
    return this.memoryHistory[this.memoryHistory.length - 1] || 0;
  }

  public dispose(): void {
    if (this.stats.dom.parentNode) {
      this.stats.dom.parentNode.removeChild(this.stats.dom);
    }
  }
}