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
Decision gist · record as of 2026-07-25
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.
Use it when
- threejs-scene-setup addresses the most common blank-canvas issues: misconfigured camera near/far planes.
- threejs-scene-setup includes patterns for listening to window resize events and updating both the renderer size and camera aspect ratio.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
gamedev-skills/awesome-gamedev-agent-skills/threejs-scene-setup · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
skills/web-engines/threejs-scene-setup/SKILL.md
skills/web-engines/threejs-scene-setup/references/scene-graph.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Bootstrap or initialize a three.js scene with camera, renderer, and render loop”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill enables you to import and render glTF and GLB format 3D models directly into three.js applications. Perfect for game developers and interactive visualization projects, it handles the complete workflow from model loading through scene integration, letting you focus on gameplay and visual design rather than format conversion complexity.
threejs-webgl equips Claude Code with a comprehensive toolkit for creating immersive 3D graphics and WebGL-powered experiences. This skillstack integrates Three.js alongside complementary libraries like GSAP and Babylon.js, enabling developers to craft sophisticated animations and interactive visualizations for modern web applications.
This skill teaches the core principles of Three.js, a popular JavaScript library for creating interactive 3D graphics in web browsers. You'll explore fundamental concepts like scene setup, camera positioning, lighting, and object manipulation through practical examples designed to build your foundation in 3D web development.
This skill teaches you how to transform dull or featureless 3D geometry into visually compelling scenes using Three.js. You'll learn to select appropriate material types, configure their properties, and strategically place light sources to achieve realistic shading and depth. Perfect for game developers and 3D graphics enthusiasts who want to move beyond basic mesh rendering.
This skill equips developers with proven architectural patterns for integrating multiple 3D rendering and animation frameworks into cohesive web applications. Learn how to combine Three.js, Babylon.js, React Three Fiber, and GSAP effectively while managing complexity and performance across modern web stacks.
Master the art of crafting engaging 3D gaming experiences using Three.js, a powerful JavaScript library for real-time graphics. This skill equips you with the techniques to design interactive worlds, manage 3D assets, and deploy polished games ready for players. Perfect for developers eager to break into game development without heavy engine overhead.