skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

threejs-fundamentals

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

Updated Sep 1, 2026
Search Tags:#javascript#webgl#three.js#3d graphics#camera#renderer#scene setup
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-fundamentals-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-fundamentals
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/threejs-fundamentals
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-fundamentals-zamansepeti43

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 coordinate systems—and small mistakes in configuration lead to blank screens, distorted views, or memory leaks. This Skill provides correct, ready-to-use patterns for the foundational Three.js APIs. ## Core Features & Use Cases - Scene and Renderer Setup: Create scenes with backgrounds, fog, and environment maps, and configure WebGLRenderer with tone mapping, color space, shadows, and pixel ratio handling. - Camera Configuration: Work with PerspectiveCamera, OrthographicCamera, ArrayCamera, and CubeCamera for reflections and multi-viewport rendering. - Object Hierarchy and Math: Manage Object3D transforms, groups, layers, and traversal, plus Vector3, Matrix4, Quaternion, Euler, and Color math utilities. - Use Case: When building a 3D product viewer, use this Skill to set up the scene, add a perspective camera with resize handling, configure ACES tone mapping, and structure meshes in groups with proper disposal on unmount. ## Quick Start Set up a basic Three.js scene with a perspective camera, WebGL renderer, lighting, an animated cube, and window 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, add meshes and lights to the scene, 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 is the common choice for 3D scenes. OrthographicCamera has no perspective distortion, making it suitable for 2D views, isometric projections, and technical diagrams.

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

Add a resize event listener that updates camera.aspect with the new width-to-height ratio, calls camera.updateProjectionMatrix(), and calls renderer.setSize with the new dimensions. Also reapply setPixelRatio capped at 2 for high-DPI displays.

Why does my Three.js scene show a black screen?▼

Common causes include missing lights when using MeshStandardMaterial, the camera pointing away from objects, objects outside the near/far clipping planes, or the renderer size never being set. Check that renderer.render is called each frame with the correct scene and camera.

How do I properly dispose of Three.js objects to avoid memory leaks?▼

Call dispose() on geometries, materials, and textures when objects are removed, then remove them from the scene. For arrays of materials, iterate and dispose each one, and call renderer.dispose() when tearing down the entire context.

What coordinate system does Three.js use?▼

Three.js uses a right-handed coordinate system where +X points right, +Y points up, and +Z points toward the viewer. You can visualize the axes in a scene by adding a THREE.AxesHelper, which renders red, green, and blue lines for X, Y, and Z.

Related Skills

Explore More Software Engineering Skills→
xxihxxih
1

bun-runtime

Set up and run JavaScript and TypeScript projects using the Bun runtime.

Community
Basic
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

threejs-scene-builder

Generates Three.js and React Three Fiber scenes with GLTF loading, animation, and lighting.

Official
Advanced
gyalamanch001agyalamanch001a

threejs-lighting

Configure Three.js lighting with shadow maps and environment maps.

Community
Intermediate
organvm-i-theoriaorganvm-i-theoria

react-three-fiber-patterns

Build declarative 3D scenes in React using react-three-fiber, drei helpers, and custom shaders.

Official
Intermediate