What problem does it solve? Setting up a Three.js scene involves many interdependent pieces—scene graph, camera configuration, renderer options, resize handling, and resource cleanup—and getting any of them wrong produces blank canvases, distorted views, or memory leaks. This Skill provides working reference patterns for the core Three.js API so you can build correct 3D scenes without digging through documentation. ## Core Features & Use Cases - Scene and Renderer Setup: Ready-to-use patterns for Scene, WebGLRenderer, tone mapping, color space, shadows, and responsive canvas resizing. - Camera and Object Hierarchy: Covers PerspectiveCamera, OrthographicCamera, CubeCamera, Object3D transforms, groups, layers, and the right-handed coordinate system. - Math and Performance Utilities: Vector3, Matrix4, Quaternion, Euler, Color, MathUtils, plus cleanup, clock-based animation, geometry merging, and LOD patterns. - Use Case: You need a rotating product viewer on a landing page. Use this Skill to scaffold the scene, camera, lighting, animation loop, and resize handler, then dispose of resources cleanly when the component unmounts. ## Quick Start Ask the AI to create a Three.js scene with a perspective camera, an animated lit cube, and proper resize handling using this skill.
