What problem does it solve? Setting up a Three.js scene involves many interdependent pieces—scene graph, camera configuration, renderer options, lighting, and resize handling—and getting any of them wrong produces blank screens or broken rendering. This Skill provides working code patterns and API references for the core Three.js building blocks so you can bootstrap and manage 3D scenes correctly. ## Core Features & Use Cases - Scene & Renderer Setup: Ready-to-use patterns for WebGLRenderer configuration including tone mapping, color space, shadows, and pixel ratio handling. - Camera & Object Hierarchy Management: Covers PerspectiveCamera, OrthographicCamera, CubeCamera, Object3D transforms, groups, layers, and traversal. - Math & Performance Utilities: Vector3, Matrix4, Quaternion, Euler, Color, and MathUtils operations plus cleanup, clock-based animation, and LOD patterns. - Use Case: You are building a 3D product viewer in a Next.js app and need a responsive canvas with a rotating mesh, proper lighting, and clean disposal when the component unmounts. ## Quick Start Set up a basic Three.js scene with a perspective camera, a lit rotating cube, and window resize handling.
