Threejs Fundamentals
Bootstrap a correct Three.js scene—camera, renderer, lights, mesh hierarchy, and resize-safe animation loop—for web 3D prototypes and product visuals.
Overview
threejs-fundamentals is an agent skill for the Build phase that sets up Three.js scenes, cameras, renderers, and object hierarchies with a standard lit-mesh animation loop.
Install
npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-fundamentalsWhat is this skill?
- Quick-start pattern: Scene, PerspectiveCamera, WebGLRenderer with antialias and capped devicePixelRatio
- MeshStandardMaterial + AmbientLight and DirectionalLight for a lit default cube demo
- requestAnimationFrame render loop with rotation example
- Window resize handler updating aspect ratio and renderer size
- Object3D hierarchy and coordinate-system guidance for structuring 3D objects
- PerspectiveCamera FOV 75 with 0.1–1000 clip planes in the documented quick start
Adoption & trust: 5.2k installs on skills.sh; 2.3k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a 3D web scene but the agent mixes camera settings, botches resize handling, or omits lights so meshes render black.
Who is it for?
Indie devs adding WebGL visuals to a SaaS marketing page, product viewer, or small browser game using Three.js.
Skip if: Unity/Unreal pipelines, pure CSS 3D, or advanced shader-only work without a scene baseline—use specialized Three.js skills for loaders, postprocessing, or physics.
When should I use this skill?
Setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
What do I get? / Deliverables
You get a working scene graph with configured renderer, lighting, animation loop, and resize hooks ready to extend with geometry and interaction code.
- Scene/camera/renderer bootstrap code
- Lit mesh example with animation loop
- Resize listener updating camera and renderer
Recommended Skills
Journey fit
How it compares
Skill-backed scene recipes for Three.js r15x-style imports—not a hosted 3D editor or a React Three Fiber component library.
Common Questions / FAQ
Who is threejs-fundamentals for?
Solo frontend builders and creative coders using agent assistants to stand up or fix basic Three.js projects in JavaScript.
When should I use threejs-fundamentals?
During Build when creating cameras, configuring WebGLRenderer, managing Object3D parent/child transforms, or wiring the first animation and resize handlers.
Is threejs-fundamentals safe to install?
It is documentation-style procedural knowledge; confirm package source and review Security Audits on this Prism page before installing skills from third-party repos.
SKILL.md
READMESKILL.md - Threejs Fundamentals
# Three.js Fundamentals ## 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: tr