Threejs
Bootstrap a Three.js WebGL scene with camera, renderer, lights, mesh hierarchy, resize handling, and an animation loop.
Overview
Three.js Fundamentals is an agent skill for the Build phase that guides scene, camera, renderer, lighting, mesh setup, and animation-loop basics for browser WebGL.
Install
npx skills add https://github.com/mrgoonie/claudekit-skills --skill threejsWhat is this skill?
- PerspectiveCamera, Scene, and WebGLRenderer setup with antialias and pixel ratio cap
- MeshStandardMaterial mesh with AmbientLight and DirectionalLight positioning
- requestAnimationFrame render loop with basic rotation animation
- Window resize handler updating aspect ratio and renderer dimensions
- Object3D hierarchy and coordinate-system fundamentals called out in overview
Adoption & trust: 1k installs on skills.sh; 2.1k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a 3D preview or interactive scene in the browser but keep misconfiguring camera aspect, renderer size, or the render loop.
Who is it for?
Solo builders embedding lightweight 3D in React, Vite, or vanilla JS without pulling a full game framework first.
Skip if: Teams needing only 2D Canvas/CSS animations or a complete Three.js asset pipeline and physics stack in one skill.
When should I use this skill?
When setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
What do I get? / Deliverables
You get a runnable Three.js scene with lit mesh, animation loop, and resize handling ready to extend with assets and interaction.
- Runnable scene setup code
- Resize-safe camera and renderer configuration
Recommended Skills
Journey fit
3D rendering setup is core product construction for web demos, games, and interactive marketing—not distribution or production ops. Frontend is the canonical shelf because the skill covers scene graph, WebGLRenderer, and browser resize—not backend APIs or asset pipelines alone.
How it compares
Use as a minimal scene bootstrap instead of generic frontend skills that skip WebGL renderer and lighting defaults.
Common Questions / FAQ
Who is threejs for?
It is for indie web developers and agent-assisted coders starting Three.js scenes for demos, landing pages, or small 3D products.
When should I use threejs?
Use it in Build / frontend when setting up cameras, renderers, object hierarchies, transforms, or your first animated mesh in the browser.
Is threejs safe to install?
Check the Security Audits panel on this page; the skill is documentation and code patterns with no required cluster or payment access.
SKILL.md
READMESKILL.md - Threejs
# Three.js Fundamentals ## Overview Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms. ## Quick Start ```javascript import * as THREE from "three"; // Create scene, camera, renderer const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000, ); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); document.body.appendChild(renderer.domElement); // Add a mesh const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // Add light scene.add(new THREE.AmbientLight(0xffffff, 0.5)); const dirLight = new THREE.DirectionalLight(0xffffff, 1); dirLight.position.set(5, 5, 5); scene.add(dirLight); camera.position.z = 5; // Animation loop function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); // Handle resize window.addEventListener("resize", () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); ``` ## Core Classes ### Scene Container for all 3D objects, lights, and cameras. ```javascript const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); // Solid color scene.background = texture; // Skybox texture scene.background = cubeTexture; // Cubemap scene.environment = envMap; // Environment map for PBR scene.fog = new THREE.Fog(0xffffff, 1, 100); // Linear fog scene.fog = new THREE.FogExp2(0xffffff, 0.02); // Exponential fog ``` ### Cameras **PerspectiveCamera** - Most common, simulates human eye. ```javascript // PerspectiveCamera(fov, aspect, near, far) const camera = new THREE.PerspectiveCamera( 75, // Field of view (degrees) window.innerWidth / window.innerHeight, // Aspect ratio 0.1, // Near clipping plane 1000, // Far clipping plane ); camera.position.set(0, 5, 10); camera.lookAt(0, 0, 0); camera.updateProjectionMatrix(); // Call after changing fov, aspect, near, far ``` **OrthographicCamera** - No perspective distortion, good for 2D/isometric. ```javascript // OrthographicCamera(left, right, top, bottom, near, far) const aspect = window.innerWidth / window.innerHeight; const frustumSize = 10; const camera = new THREE.OrthographicCamera( (frustumSize * aspect) / -2, (frustumSize * aspect) / 2, frustumSize / 2, frustumSize / -2, 0.1, 1000, ); ``` **ArrayCamera** - Multiple viewports with sub-cameras. ```javascript const cameras = []; for (let i = 0; i < 4; i++) { const subcamera = new THREE.PerspectiveCamera(40, 1, 0.1, 100); subcamera.viewport = new THREE.Vector4( Math.floor(i % 2) * 0.5, Math.floor(i / 2) * 0.5, 0.5, 0.5, ); cameras.push(subcamera); } const arrayCamera = new THREE.ArrayCamera(cameras); ``` **CubeCamera** - Renders environment maps for reflections. ```javascript const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256); const cubeCamera = new THREE.CubeCamera(0.1, 1000, cubeRenderTarget); scene.add(cubeCamera); // Use for reflections material.envMap = cubeRenderTarget.texture; // Update each frame (expensive!) cubeCamera.position.copy(reflectiveMesh.position); cubeCamera.update(renderer, scene); ``` ### WebGLRenderer ```javascript const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("#canvas"), // Optional existing canvas antialias: true, // Smooth edges alpha: true, // Transparent background powerPreference: "high-performance", // GPU hint preserveDrawingBuffer: true, // For screenshots }); rendere