What problem does it solve? Setting up a Three.js scene involves many interdependent pieces—cameras, renderers, lights, object hierarchies, and math utilities—and getting any of them wrong leads to blank screens, distorted views, or memory leaks. This Skill provides working code patterns and API references so you can build correct 3D scenes without digging through documentation. ## Core Features & Use Cases - Scene and Renderer Setup: Ready-to-use patterns for WebGLRenderer configuration including tone mapping, color spaces, shadow maps, and responsive canvas resizing. - Camera and Object3D Reference: Covers PerspectiveCamera, OrthographicCamera, CubeCamera, and the full Object3D transform and hierarchy API. - Math Utilities and Performance: Vector3, Matrix4, Quaternion, and Color operations plus cleanup, clock-based animation, LOD, and geometry merging patterns. - Use Case: You are building an interactive 3D product viewer in a Next.js app and need a correctly configured scene with lighting, shadows, and resize handling—this Skill gives you the complete working setup. ## Quick Start Set up a Three.js scene with a perspective camera, lighting, an animated rotating cube, and window resize handling.
