skills.rest
capella-hotel-group
capella-hotel-groupOFFICIAL
Explore all skills by this author →
GitHub

threejs-fundamentals

Configure Three.js scenes, cameras, renderers, and Object3D hierarchies for 3D web applications.

Updated Apr 6, 2026
Search Tags:#javascript#webgl#three.js#3d graphics#camera#renderer#scene setup
One-click install
npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill threejs-fundamentals-capella-hotel-group
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-fundamentals
Source: https://github.com/capella-hotel-group/capella-hotel-group-poc/tree/main/.github/skills/threejs-fundamentals
Command: npx skills add https://github.com/capella-hotel-group/capella-hotel-group-poc --skill threejs-fundamentals-capella-hotel-group

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

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 canvases, distorted views, or memory leaks. This Skill provides working reference patterns for the core Three.js APIs so you can build correct 3D scenes without hunting through documentation. ## Core Features & Use Cases - Scene and Renderer Setup: Ready-to-use patterns for WebGLRenderer configuration including tone mapping, color space, shadows, and pixel ratio handling. - Camera and Object Hierarchy Guidance: Covers PerspectiveCamera, OrthographicCamera, CubeCamera, Object3D transforms, groups, and the right-handed coordinate system. - Math and Performance Patterns: Reference for Vector3, Matrix4, Quaternion, and Color operations plus cleanup, clock-based animation, and draw-call optimization. - Use Case: You are adding an interactive 3D product viewer to a web page. Use this Skill to scaffold the scene, camera, lighting, resize handling, and animation loop correctly on the first attempt. ## Quick Start Ask the AI to create a Three.js scene with a perspective camera, an animated rotating cube, directional lighting, and responsive resize handling.

Frequently Asked Questions about threejs-fundamentals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a basic Three.js scene with camera and renderer?▼

Create a THREE.Scene, a PerspectiveCamera with fov, aspect, near, and far values, and a WebGLRenderer with antialias enabled. Call renderer.setSize, append renderer.domElement to the document, then render inside a requestAnimationFrame loop.

What is the difference between PerspectiveCamera and OrthographicCamera in Three.js?▼

PerspectiveCamera simulates human vision with depth-based foreshortening and suits most 3D scenes. OrthographicCamera has no perspective distortion, making it appropriate for 2D views, isometric projections, and technical diagrams.

How do I handle window resize in Three.js?▼

Update camera.aspect with the new width-to-height ratio, call camera.updateProjectionMatrix(), then call renderer.setSize with the new dimensions. Reapply setPixelRatio with Math.min(window.devicePixelRatio, 2) for consistent rendering.

Why does my Three.js scene have memory leaks?▼

Leaks occur when geometries, materials, and textures are not disposed after removal. Call dispose() on each geometry, material, and texture, remove meshes from the scene, and call renderer.dispose() when tearing down.

How do I make Three.js animation speed consistent across framerates?▼

Use THREE.Clock and multiply per-frame changes by clock.getDelta(), the elapsed seconds since the last frame. This makes rotation and movement speed independent of the display refresh rate.

How can I reduce draw calls in a Three.js scene?▼

Merge static geometries with mergeGeometries from BufferGeometryUtils, use instancing for repeated meshes, and apply THREE.LOD for distance-based detail switching. Frustum culling is enabled by default when bounding volumes are correct.

Related Skills

Explore More Software Engineering Skills→
fragments-sdkfragments-sdk
1

fragments/ui-setup

Install the Fragments UI library and configure FragmentsProvider in React projects.

Official
Intermediate
TumeloRamaphosaTumeloRamaphosa

threejs-webgl

Create interactive Three.js 3D scenes with WebGL or WebGPU.

Community
Advanced
EntelligentsiaEntelligentsia
1

threejs-loaders

Load GLTF models, textures, and environment maps in Three.js with loaders.

Official
Advanced
openaiopenai
5.3k

react-three-fiber-game

Build React-hosted 3D browser games using React Three Fiber and pmndrs libraries.

Official
Intermediate