mcpField
3
3d-graphics

3d-graphics

github.com/samhvw8创意与媒体15136 次安装今天更新
代码仓库

关于 3d-graphics

面向使用 Three.js 构建 3D Web 应用的学习技能，按进阶路径提供图形开发参考，涵盖交互、渲染效果及高级主题。

主要功能

  1. 01渐进式 Three.js 学习路径
  2. 02加载 3D 资源与纹理
  3. 03相机、灯光与动画
  4. 04交互与后期处理
  5. 05性能优化与 WebGPU

适用场景

  1. 01构建交互式 3D Web 体验
  2. 02加载并播放 3D 模型动画
  3. 03添加渲染效果与着色器
  4. 04提升场景渲染性能

安装

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

$npx skills add https://github.com/samhvw8/dotfiles --skill 3d-graphics

安装后在 Claude Code 中输入/3d-graphics确认已加载。

包含的文件

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

references/
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
12-performance.md
13-node-materials.md
14-physics-vr.md
15-specialized-loaders.md
16-webgpu.md

详细介绍

Three.js 开发

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

何时使用此技能

适用于以下场景：

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

渐进式学习路径

第 1 级：入门

加载 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 — 片段、混合器、关键帧
  • 数学：references/07-math.md — 向量、矩阵、四元数、曲线
第 3 级：交互与效果
  • 交互：references/08-interaction.md — 射线投射、拾取、变换
  • 后期处理：references/09-postprocessing.md — 通道、泛光、SSAO、SSR
  • 控件（插件）：references/10-controls.md — 轨道、变换、第一人称
第 4 级：高级渲染
  • 高级材质：references/11-materials-advanced.md — PBR、自定义着色器
  • 性能：references/12-performance.md — 实例化、LOD、批处理、剔除
  • 节点材质（TSL）：references/13-node-materials.md — 着色器图、计算
第 5 级：专项主题
  • 物理：references/14-physics-vr.md — Ammo、Rapier、Jolt、VR/XR
  • 高级加载器：references/15-specialized-loaders.md — SVG、VRML、领域专用格式
  • WebGPU：references/16-webgpu.md — 现代后端、计算着色器

快速入门模式

// 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