Files

nvtien 2d31c0a137 Initial commit: antigravity-claudekit

2026-02-16 14:02:42 +09:00

3.4 KiB

Raw Blame History

name, description

name	description
ck-threejs	Build 3D web apps with Three.js (WebGL/WebGPU). Use for 3D scenes, GLTF model loading, animations, physics, VR/XR experiences, particle effects, custom shaders, post-processing, and compute shaders.

Three.js Development

High-performance 3D web applications using Three.js with 556 searchable examples, 60 API classes, and 20 use-case templates.

When to Use

Building 3D scenes, games, or data visualizations
Loading 3D models (GLTF, FBX, OBJ)
Implementing animations, physics, or VR/AR (WebXR)
Creating particle effects or custom GLSL shaders
Optimizing WebGL/WebGPU rendering performance

Don't Use When

Simple CSS/SVG animations suffice
2D canvas work without 3D requirements (use plain Canvas API)

Search Examples and API

python3 $HOME/.claude/skills/threejs/scripts/search.py "<query>" [--domain <domain>] [-n <max>]

# Examples
python3 $HOME/.claude/skills/threejs/scripts/search.py "particle compute webgpu"
python3 $HOME/.claude/skills/threejs/scripts/search.py "camera" --domain api
python3 $HOME/.claude/skills/threejs/scripts/search.py "product configurator" --use-case
python3 $HOME/.claude/skills/threejs/scripts/search.py --category webgpu -n 10

Domains: examples (code), api (classes), use-cases (project types), categories (browse)

Quick Start

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);
document.body.appendChild(renderer.domElement);

scene.add(new THREE.AmbientLight(0x404040));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
new GLTFLoader().load('model.glb', (gltf) => scene.add(gltf.scene));

function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); }
animate();

Common Use Cases

Use Case	Key Tools	Complexity
Product Configurator	GLTF, PBR, EnvMaps	Medium
Game Development	Animation, Physics, Controls	High
Data Visualization	BufferGeometry, Points	Medium
360 Panorama	Equirectangular, WebXR	Low
Architectural Viz	GLTF, HDR, CSM Shadows	High

Progressive Reference Files

references/00-fundamentals.md — core concepts, scene graph
references/01-getting-started.md — setup, basic rendering
references/02-loaders.md — GLTF, FBX, OBJ loaders
references/03-textures.md — texture types, mapping
references/04-cameras.md — camera types, controls
references/05-lights.md — light types, shadows
references/06-animations.md — AnimationMixer, clips
references/08-interaction.md — raycasting, picking
references/09-postprocessing.md — bloom, SSAO, SSR
references/11-materials.md — PBR, standard materials
references/12-performance.md — instancing, LOD, batching
references/13-node-materials.md — TSL shader graphs
references/14-physics-vr.md — physics, WebXR
references/16-webgpu.md — WebGPU, compute shaders
references/17-shader.md — custom GLSL shaders

3.4 KiB Raw Blame History