mcpField
C
ck:threejs

ck:threejs

github.com/binjuhor开发10438 次安装5 天前更新
代码仓库

关于 ck:threejs

ck:threejs 是面向 Three.js 3D Web 应用开发的技能，提供可搜索的示例、API 参考和场景模板，涵盖渲染、动画等开发任务。

主要功能

  1. 01可搜索的 Three.js 示例
  2. 02API 类与方法参考
  3. 03应用场景模板
  4. 04从基础到进阶的分层指南
  5. 05WebXR、物理与 WebGPU 参考

适用场景

  1. 01查找粒子效果或 WebGPU 示例
  2. 02查询相机等 API 参考
  3. 03规划产品配置器
  4. 04开发游戏、可视化或 VR/AR 场景

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/binjuhor/shadcn-lar --skill ck:threejs

安装后在 Claude Code 中输入/ck:threejs确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
02-loaders.md
01-getting-started.md
05-lights.md
04-cameras.md
03-textures.md
07-math.md
06-animations.md
08-interaction.md
09-postprocessing.md
10-controls.md
11-materials-advanced.md
13-node-materials.md
14-physics-vr.md
15-specialized-loaders.md
16-webgpu.md
12-performance.md

详细介绍

Three.js 开发

使用 Three.js 构建高性能 3D Web 应用。包含 13 个类别中的 556 个可搜索示例、60 个 API 类和 20 个用例模板。

适用场景

  • 构建 3D 场景、游戏或可视化
  • 加载 3D 模型（GLTF、FBX、OBJ）
  • 实现动画、物理效果或 VR/XR
  • 创建粒子效果或自定义着色器
  • 优化渲染性能

搜索示例和 API

使用搜索 CLI 查找相关示例和 API 参考：

python3 .claude/skills/threejs/scripts/search.py "<query>" [--domain <domain>] [-n <max_results>]
搜索领域
领域用途示例查询
examples查找代码示例"particle effects gpu"
api类/方法参考"PerspectiveCamera"
use-cases项目建议"product configurator"
categories浏览类别"webgpu"
快速示例
# Find particle/compute examples
python3 .claude/skills/threejs/scripts/search.py "particle compute webgpu"

# Search API for camera classes
python3 .claude/skills/threejs/scripts/search.py "camera" --domain api

# Get examples for a use case
python3 .claude/skills/threejs/scripts/search.py "product configurator" --use-case

# Filter by category
python3 .claude/skills/threejs/scripts/search.py --category webgpu -n 10

# Filter by complexity
python3 .claude/skills/threejs/scripts/search.py --complexity high -n 5

示例类别

类别数量描述
webgl216标准 WebGL 渲染
webgpu (wip)190新式 WebGPU + 计算着色器
webgl / advanced48底层 GPU、自定义着色器
webgl / postprocessing27泛光、SSAO、SSR、DOF
webxr26VR/AR 体验
physics13物理模拟

常见用例

用例推荐技术复杂度
产品配置器GLTF、PBR、EnvMaps中
游戏开发动画、物理、控制器高
数据可视化BufferGeometry、Points中
360 全景等距柱状投影、WebXR低
建筑可视化GLTF、HDR、CSM 阴影高

快速入门

// 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();

渐进式参考文件

第 1 级：基础知识
  • references/00-fundamentals.md - 核心概念、场景图
  • references/01-getting-started.md - 设置、基础渲染
第 2 级：常见任务
  • references/02-loaders.md - GLTF、FBX、OBJ 加载器
  • references/03-textures.md - 纹理类型、映射
  • references/04-cameras.md - 相机类型、控制器
  • references/05-lights.md - 光源类型、阴影
  • references/06-animations.md - AnimationMixer、片段
  • references/11-materials.md - PBR、标准材质
  • references/18-geometry.md - BufferGeometry、基本图元
第 3 级：交互
  • references/08-interaction.md - 射线投射、拾取
  • references/09-postprocessing.md - 泛光、SSAO、SSR
  • references/10-controls.md - OrbitControls 等
第 4 级：进阶
  • references/12-performance.md - 实例化、LOD、批处理
  • references/13-node-materials.md - TSL 着色器图
  • references/17-shader.md - 自定义 GLSL 着色器
第 5 级：专用主题
  • references/14-physics-vr.md - 物理效果、WebXR
  • references/16-webgpu.md - WebGPU、计算着色器

外部资源

评论

支持 Markdown