threejs-scene-setup
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.
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.
AI-generated summary based on this skill's SKILL.md
Install
gamedev-skills/awesome-gamedev-agent-skills/threejs-scene-setup · repository language: Python
git clone https://github.com/gamedev-skills/awesome-gamedev-agent-skills
cp -r awesome-gamedev-agent-skills/skills/web-engines/threejs-scene-setup ~/.claude/skills/threejs-scene-setupFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create a three.js scene with camera and renderer?
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.
Why is my three.js canvas blank or black?
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.
How do I make a three.js canvas responsive to window resize?
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.
What is the three.js scene camera renderer trio and how do I set it up?
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).
How do I add OrbitControls for interactive camera navigation?
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.
How do I set up ES modules and import maps for three.js development?
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.
SKILL.md
rendered from the published skill — quoted content, verbatim
three.js Scene Setup
Create the foundation of a three.js app: module loading, the scene/camera/renderer trio, the render loop, responsive resizing, and camera controls. Patterns target r165+ and are verified against r184.
When to use
- Use when bootstrapping a three.js scene, fixing a blank/black canvas, making the
canvas responsive, setting up the animation loop, or adding
OrbitControls. - Use when
package.jsondepends onthreeand code does `import * as THREE from
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/web-engines/threejs-scene-setup/SKILL.md
skills/web-engines/threejs-scene-setup/references/scene-graph.md