名称: threejs 描述: 使用 Three.js 构建沉浸式 3D 网页体验 - WebGL/WebGPU 库，用于场景、相机、几何体、材质、灯光、动画、加载器、后处理、着色器（包括基于节点的 TSL）、计算、物理、VR/XR 和高级渲染。适用于创建 3D 可视化、游戏、交互式图形、数据可视化、产品配置器、建筑漫游或 WebGL/WebGPU 应用程序。涵盖 OrbitControls、GLTF/FBX 加载、PBR 材质、阴影映射、后处理效果（光晕、SSAO、SSR）、自定义着色器、实例化、LOD、动画系统和 WebXR。 许可证: MIT 版本: 1.0.0
Three.js 开发
使用 Three.js 构建高性能 3D 网页应用程序 - 一个跨浏览器的 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- Orbit、变换、第一人称
级别 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();