mcpField
T
threejs

threejs

github.com/mrgoonie开发2.2k1.3k 次安装30 周前更新
代码仓库

关于 threejs

面向使用 Three.js 构建 3D Web 应用的开发者技能。分阶段参考资料涵盖场景构建、渲染优化及高级专题。

主要功能

  1. 01分阶段学习路径
  2. 02场景与渲染器配置
  3. 03加载 3D 资源和纹理
  4. 04相机、灯光与动画
  5. 05交互和后期处理
  6. 06性能与 WebGPU 专题

适用场景

  1. 01构建交互式 3D Web 场景
  2. 02加载模型和纹理
  3. 03制作渲染效果
  4. 04优化 3D 应用

安装

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

$npx skills add https://github.com/mrgoonie/claudekit-skills --skill threejs

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

包含的文件

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

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

详细介绍

Three.js 开发

使用 Three.js 构建高性能 3D Web 应用——这是一个跨浏览器的 WebGL/WebGPU 库。

何时使用此技能

适用于以下场景：

  • 处理 3D 场景、模型、动画或可视化
  • 进行 WebGL/WebGPU 渲染和图形编程
  • 创建交互式 3D 体验（游戏、配置器、数据可视化）
  • 处理相机控制、光照、材质或着色器
  • 加载 3D 资源（GLTF、FBX、OBJ）或纹理
  • 使用后期处理效果（泛光、景深、SSAO）
  • 进行物理模拟、VR/XR 体验或空间音频处理
  • 优化性能（实例化、LOD、视锥体剔除）

渐进式学习路径

Level 1：入门
  • 加载 references/00-fundamentals.md - 基础知识
  • 加载 references/01-getting-started.md - 场景设置、基本几何体、材质、光源、渲染循环
Level 2：常见任务
  • 资源加载：references/02-loaders.md - GLTF、FBX、OBJ、纹理加载器
  • 纹理：references/03-textures.md - 类型、映射、环绕、过滤
  • 相机：references/04-cameras.md - 透视、正交、控制
  • 光源：references/05-lights.md - 类型、阴影、辅助对象
  • 动画：references/06-animations.md - 动画片段、混合器、关键帧
  • 数学：references/07-math.md - 向量、矩阵、四元数、曲线
  • 几何体：references/18-geometry.md - 内置形状、BufferGeometry、自定义几何体、实例化
  • 材质：references/11-materials.md - PBR、基础、Phong、Lambert、物理、卡通、法线、深度、原始、着色器材质，材质属性
Level 3：交互与效果
  • 交互：references/08-interaction.md - 射线投射、拾取、变换
  • 后期处理：references/09-postprocessing.md - 通道、泛光、SSAO、SSR
  • 控制器（附加组件）：references/10-controls.md - 轨道、变换、第一人称
Level 4：高级渲染
  • 高级材质：references/11-materials-advanced.md - PBR、自定义着色器
  • 性能：references/12-performance.md - 实例化、LOD、批处理、剔除
  • 节点材质（TSL）：references/13-node-materials.md - 着色器图、计算
Level 5：专项主题
  • 物理：references/14-physics-vr.md - Ammo、Rapier、Jolt、VR/XR
  • 高级加载器：references/15-specialized-loaders.md - SVG、VRML、特定领域
  • WebGPU：references/16-webgpu.md - 现代后端、计算着色器
  • 着色器：references/17-shader.md - GLSL、ShaderMaterial、uniform、自定义效果

快速入门模式

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

外部资源

评论

支持 Markdown