メニュー
Build 3D web experiences with Three.js. Use for WebGL/WebGPU scenes, GLTF models, animations, physics, VR/XR. Supports 556 searchable examples.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/hoanghd218/ZaloCRM --skill ak-threejsコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Search library/framework documentation via llms.txt (context7.com). Use for API docs, GitHub repository analysis, technical documentation lookup, latest library features.
Interview-driven advisory skill. Analyzes a prompt or URL (GitHub issue, spec, doc), scouts the codebase, interviews the user one question at a time to reframe the problem into exact requirements and goals, then delivers honest advice: what to do, what to avoid, better alternatives, benefits and trade-offs. Use when the user asks for advice, a second opinion, a sanity check, requirement reframing before committing to a direction, or wants an existing plan or design pressure-tested (grilled) one question at a time.
Browser and desktop automation through the agent-browser CLI. Use for long autonomous browsing, compact page snapshots, screenshots, form filling, login/test flows without real Chrome profile state, scraping, exploratory QA, cloud browsers, Electron apps, Slack automation, and bug hunts.
| name | ak:threejs |
| description | Build 3D web experiences with Three.js. Use for WebGL/WebGPU scenes, GLTF models, animations, physics, VR/XR. Supports 556 searchable examples. |
| user-invocable | true |
| when_to_use | Invoke for 3D, WebGL/WebGPU, GLTF, physics, or XR. |
| category | frontend |
| keywords | ["threejs","3d","webgl","webgpu","gltf"] |
| license | MIT |
| argument-hint | [3D scene or feature] |
| metadata | {"author":"agentkit","version":"3.0.0"} |
Build high-performance 3D web applications using Three.js. Contains 556 searchable examples across 13 categories, 60 API classes, and 20 use-case templates.
Use the search CLI to find relevant examples and API references:
python3 scripts/search.py "<query>" [--domain <domain>] [-n <max_results>]
| Domain | Use For | Example Query |
|---|---|---|
examples | Find code examples | "particle effects gpu" |
api | Class/method reference | "PerspectiveCamera" |
use-cases | Project recommendations | "product configurator" |
categories | Browse categories | "webgpu" |
# Find particle/compute examples
python3 scripts/search.py "particle compute webgpu"
# Search API for camera classes
python3 scripts/search.py "camera" --domain api
# Get examples for a use case
python3 scripts/search.py "product configurator" --use-case
# Filter by category
python3 scripts/search.py --category webgpu -n 10
# Filter by complexity
python3 scripts/search.py --complexity high -n 5
| Category | Count | Description |
|---|---|---|
webgl | 216 | Standard WebGL rendering |
webgpu (wip) |
| 190 |
| Modern WebGPU + compute shaders |
webgl / advanced | 48 | Low-level GPU, custom shaders |
webgl / postprocessing | 27 | Bloom, SSAO, SSR, DOF |
webxr | 26 | VR/AR experiences |
physics | 13 | Physics simulation |
| Use Case | Recommended | 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 |
// 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({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// 2. Lighting
scene.add(new THREE.AmbientLight(0x404040));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);
// 3. Load GLTF Model
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => scene.add(gltf.scene));
// 4. Animation Loop
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
references/00-fundamentals.md - Core concepts, scene graphreferences/01-getting-started.md - Setup, basic renderingreferences/02-loaders.md - GLTF, FBX, OBJ loadersreferences/03-textures.md - Texture types, mappingreferences/04-cameras.md - Camera types, controlsreferences/05-lights.md - Light types, shadowsreferences/06-animations.md - AnimationMixer, clipsreferences/11-materials.md - PBR, standard materialsreferences/18-geometry.md - BufferGeometry, primitivesreferences/08-interaction.md - Raycasting, pickingreferences/09-postprocessing.md - Bloom, SSAO, SSRreferences/10-controls.md - OrbitControls, etc.references/12-performance.md - Instancing, LOD, batchingreferences/13-node-materials.md - TSL shader graphsreferences/17-shader.md - Custom GLSL shadersreferences/14-physics-vr.md - Physics, WebXRreferences/16-webgpu.md - WebGPU, compute shaders