القائمة
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يبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى 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