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 correct, ready-to-use patterns for the core Three.js building blocks. ## Core Features & Use Cases - Scene and Renderer Setup: Create scenes with backgrounds, fog, and environment maps, and configure WebGLRenderer with tone mapping, color space, shadows, and pixel ratio handling. - Camera Configuration: Use PerspectiveCamera, OrthographicCamera, ArrayCamera, and CubeCamera for standard views, isometric views, split viewports, and real-time reflections. - Object Hierarchy and Math Utilities: Manage Object3D transforms, groups, layers, and traversal, plus Vector3, Matrix4, Quaternion, Euler, and Color operations. - Use Case: When building an interactive 3D product viewer, use this Skill to set up the scene, camera, lighting, resize handling, and animation loop correctly on the first attempt, including proper disposal to avoid GPU memory leaks. ## Quick Start Set up a basic Three.js scene with a perspective camera, a lit rotating cube, an animation loop, and responsive resize handling.
