Build 3D web apps with Three.js (WebGL/WebGPU). Use for 3D scenes, animations, custom shaders, PBR materials, VR/XR experiences, games, data visualizations, product configurators.
npxskills add mrgoonie/claudekit-skills--skill threejsLoading…
Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.
Use when working with:
references/00-fundamentals.md - Fundamentalsreferences/01-getting-started.md - Scene setup, basic geometries, materials, lights, rendering loopreferences/02-loaders.md - GLTF, FBX, OBJ, texture loadersreferences/03-textures.md - Types, mapping, wrapping, filteringreferences/04-cameras.md - Perspective, orthographic, controlsreferences/05-lights.md - Types, shadows, helpersreferences/06-animations.md - Clips, mixer, keyframesreferences/07-math.md - Vectors, matrices, quaternions, curvesreferences/18-geometry.md - Built-in shapes, BufferGeometry, custom geometry, instancingreferences/11-materials.md - PBR, basic, phong, lambert, physical, toon, normal, depth, raw, shader materials, material propertiesreferences/08-interaction.md - Raycasting, picking, transformsreferences/09-postprocessing.md - Passes, bloom, SSAO, SSRreferences/10-controls.md - Orbit, transform, first-personreferences/11-materials-advanced.md - PBR, custom shadersreferences/12-performance.md - Instancing, LOD, batching, cullingreferences/13-node-materials.md - Shader graphs, computereferences/14-physics-vr.md - Ammo, Rapier, Jolt, VR/XRreferences/15-specialized-loaders.md - SVG, VRML, domain-specificreferences/16-webgpu.md - Modern backend, compute shadersreferences/17-shader.md - GLSL, ShaderMaterial, uniforms, custom effects// 1. 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();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2. Add Objects
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 3. Add Lights
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));
// 4. Animation Loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).