{"enrichment":{"faq":[{"a":"threejs-scene-setup provides the complete boilerplate for initializing a three.js scene. You'll set up a Scene object, configure a PerspectiveCamera with proper aspect ratio, create a WebGLRenderer tied to your canvas element, and establish a render loop using setAnimationLoop or requestAnimationFrame. The skill handles camera positioning, renderer sizing, and pixel ratio scaling so your scene renders correctly on all displays.","q":"How do I create a three.js scene with camera and renderer?"},{"a":"threejs-scene-setup addresses the most common blank-canvas issues: misconfigured camera near/far planes, renderer not being sized to match the canvas, missing render loop calls, or scene objects positioned outside the camera's view frustum. The skill's debugging guidance walks you through verifying camera position, adding visible geometry, checking renderer output size, and confirming your animation loop is actually executing each frame.","q":"Why is my three.js canvas blank or black?"},{"a":"threejs-scene-setup includes patterns for listening to window resize events and updating both the renderer size and camera aspect ratio dynamically. When the window resizes, you update the PerspectiveCamera's aspect property, call updateProjectionMatrix(), resize the renderer to match the new window dimensions, and optionally adjust the device pixel ratio for HiDPI displays. This keeps your scene properly proportioned and sharp at any resolution.","q":"How do I make a three.js canvas responsive to window resize?"},{"a":"threejs-scene-setup teaches the essential trio: the Scene holds all your 3D objects, the PerspectiveCamera defines the viewpoint and projection, and the WebGLRenderer converts the scene into pixels on your canvas. Together they form the minimal working three.js application. You instantiate each, configure the camera's position and aspect ratio, bind the renderer to a DOM element, and connect them in your render loop by calling renderer.render(scene, camera).","q":"What is the three.js scene camera renderer trio and how do I set it up?"},{"a":"threejs-scene-setup covers integrating OrbitControls to let users rotate, zoom, and pan the camera around your scene. You import OrbitControls from the three.js addons, instantiate it with your camera and renderer's DOM element, set optional properties like autoRotate or damping, and call controls.update() in your render loop. This gives you professional camera interaction without writing mouse/touch handlers yourself.","q":"How do I add OrbitControls for interactive camera navigation?"},{"a":"threejs-scene-setup explains modern three.js module loading using ES imports and import maps. Instead of global script tags, you import Scene, Camera, Renderer, and addons directly from the three.js package. An import map in your HTML points 'three' to the CDN or local bundle, and addon paths resolve automatically. This approach keeps your code modular, enables tree-shaking, and works seamlessly with modern build tools and dev servers.","q":"How do I set up ES modules and import maps for three.js development?"}],"shadow_tags":["3d-graphics-foundation","webgl-rendering","camera-controls","module-bundling","responsive-canvas","animation-loop","scene-graph-basics","browser-3d-engine"],"summary_rewrite":"Get your three.js project off the ground with a complete scene initialization that handles camera placement, renderer configuration, and a continuous render loop. This skill provides the foundational boilerplate every three.js game needs, letting you focus on gameplay and visuals instead of setup details."},"files":[{"bytes":6690,"path":"skills/web-engines/threejs-scene-setup/SKILL.md","sha256":"10dfe26ff12936323b2575d08519fc7e38cc47f8da83bc6e122a00fa24e73d17","url":"https://skillfed.io/files/gamedev-skills/awesome-gamedev-agent-skills/threejs-scene-setup/9b365335/SKILL.md"}],"id":"gamedev-skills/awesome-gamedev-agent-skills/threejs-scene-setup","links":{"html":"https://skillfed.io/gamedev-skills/awesome-gamedev-agent-skills/threejs-scene-setup","md":"https://skillfed.io/gamedev-skills/awesome-gamedev-agent-skills/threejs-scene-setup.md","repo":"https://github.com/gamedev-skills/awesome-gamedev-agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":24,"language":"Python","last_updated":"2026-07-25","license":"Apache-2.0","name":"threejs-scene-setup","publisher":"gamedev-skills","stars":356},"relations":{"similar":[{"id":"gamedev-skills/awesome-gamedev-agent-skills/threejs-gltf-loading"},{"id":"CloudAI-X/threejs-skills/threejs-fundamentals"},{"id":"freshtechbro/claudedesignskills/threejs-webgl"},{"id":"calesthio/OpenMontage/threejs-fundamentals"},{"id":"secondsky/claude-skills/threejs"},{"id":"gamedev-skills/awesome-gamedev-agent-skills/threejs-materials-lighting"},{"id":"alecs5am/ralphy/three"},{"id":"freshtechbro/claudedesignskills/web3d-integration-patterns"},{"id":"CloudAI-X/threejs-skills/threejs-postprocessing"},{"id":"PlayableIntelligence/game-creator/threejs-game"}]},"slug":{"owner":"gamedev-skills","repo":"awesome-gamedev-agent-skills","skill":"threejs-scene-setup"},"version":"9b365335"}