From samhvw8-dot-claude
3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin samhvw8-dot-claudeThis skill uses the workspace's default tool permissions.
Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.
references/01-getting-started.mdreferences/02-loaders.mdreferences/03-textures.mdreferences/04-cameras.mdreferences/05-lights.mdreferences/06-animations.mdreferences/07-math.mdreferences/08-interaction.mdreferences/09-postprocessing.mdreferences/10-controls.mdreferences/11-materials-advanced.mdreferences/12-performance.mdreferences/13-node-materials.mdreferences/14-physics-vr.mdreferences/15-specialized-loaders.mdreferences/16-webgpu.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.
Use when working with:
Load references/01-getting-started.md - Scene setup, basic geometries, materials, lights, rendering loop
references/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/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 shaders// 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();