threejs-patternslisted

# Three.js Patterns for Next.js **Version:** three@0.169.0 + @types/three@0.169.0 **Framework:** Vanilla Three.js ONLY -- NOT React Three Fiber. **Import path for addons:** `import { X } from 'three/addons/...'` ## Installation ```bash npm install three@0.169.0 @types/three@0.169.0 ``` ## Pattern 1: Scene Setup Base pattern for all Three.js work in Next.js. ```tsx 'use client'; import { useEffect, useRef } from 'react'; import * as THREE from 'three'; export function ThreeScene({ className }: { className?: string }) { const canvasRef = useRef<HTMLCanvasElement>(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; // Renderer const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true, }); renderer.setSize(canvas.clientWidth, canvas.clientHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Scene const scene = new THREE.Scene(); // Camera const camera = new THREE.PerspectiveCamera( 75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000 ); camera.position.z = 5; // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 5, 5); scene.add(directionalLight); // Animation loop let animationId: number; const animate = () => { ani