threejs

用途

Three.js 技能用于帮助开发者使用 Three.js 构建高性能的 3D 网页应用。Three.js 是一个跨浏览器的 WebGL/WebGPU 库，适用于 3D 场景、模型、动画、可视化、交互式 3D 体验（游戏、配置器、数据可视化）、相机控制、灯光、材质与着色器、3D 资源加载、后处理特效、物理模拟、VR/XR 体验、空间音频以及性能优化等场景。

主要能力与学习路径

技能内容按渐进式学习路径分为多个层级，每层对应各自的参考文档。

第 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. 场景、相机、渲染器
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. 添加对象
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 3. 添加灯光
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0x404040));

// 4. 动画循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

外部资源

官方文档：https://threejs.org/docs/
示例：https://threejs.org/examples/
编辑器：https://threejs.org/editor/
Discord：https://discord.gg/56GBJwAnUS

适用场景

适合需要在网页中实现 3D 场景、模型展示、动画、交互式 3D 体验、数据可视化、游戏、配置器、VR/XR 等应用的开发者。

限制

该资料未提供关于收费、价格、平台限制或具体性能指标的信息，相关内容暂未提供。