Back to Details

3d-graphics

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Three.js Development

Three.js开发

Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.
使用Three.js——一款跨浏览器的WebGL/WebGPU库，构建高性能3D网页应用。

When to Use This Skill

何时使用此技能

Use when working with:
  • 3D scenes, models, animations, or visualizations
  • WebGL/WebGPU rendering and graphics programming
  • Interactive 3D experiences (games, configurators, data viz)
  • Camera controls, lighting, materials, or shaders
  • Loading 3D assets (GLTF, FBX, OBJ) or textures
  • Post-processing effects (bloom, depth of field, SSAO)
  • Physics simulations, VR/XR experiences, or spatial audio
  • Performance optimization (instancing, LOD, frustum culling)
适用于以下场景：
  • 3D场景、模型、动画或可视化效果开发
  • WebGL/WebGPU渲染与图形编程
  • 交互式3D体验（游戏、配置器、数据可视化）
  • 相机控制、灯光、材质或着色器开发
  • 加载3D资源（GLTF、FBX、OBJ）或纹理
  • 后处理效果（bloom、景深、SSAO）
  • 物理模拟、VR/XR体验或空间音频
  • 性能优化（实例化、LOD、视锥体剔除）

Progressive Learning Path

进阶学习路径

Level 1: Getting Started

级别1：入门

Load 
references/01-getting-started.md
- Scene setup, basic geometries, materials, lights, rendering loop
加载
references/01-getting-started.md
- 场景搭建、基础几何体、材质、灯光、渲染循环

Level 2: Common Tasks

级别2：常见任务

  • Asset Loading: 
    references/02-loaders.md
    - GLTF, FBX, OBJ, texture loaders
  • Textures: 
    references/03-textures.md
    - Types, mapping, wrapping, filtering
  • Cameras: 
    references/04-cameras.md
    - Perspective, orthographic, controls
  • Lights: 
    references/05-lights.md
    - Types, shadows, helpers
  • Animations: 
    references/06-animations.md
    - Clips, mixer, keyframes
  • Math: 
    references/07-math.md
    - Vectors, matrices, quaternions, curves
  • 资源加载：
    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
    - 向量、矩阵、四元数、曲线

Level 3: Interactive & Effects

级别3：交互与特效

  • Interaction: 
    references/08-interaction.md
    - Raycasting, picking, transforms
  • Post-Processing: 
    references/09-postprocessing.md
    - Passes, bloom, SSAO, SSR
  • Controls (Addons): 
    references/10-controls.md
    - Orbit, transform, first-person
  • 交互：
    references/08-interaction.md
    - 射线检测、拾取、变换
  • 后处理：
    references/09-postprocessing.md
    - 处理通道、bloom、SSAO、SSR
  • 控制器（插件）：
    references/10-controls.md
    - 轨道控制器、变换控制器、第一人称控制器

Level 4: Advanced Rendering

级别4：高级渲染

  • Materials Advanced: 
    references/11-materials-advanced.md
    - PBR, custom shaders
  • Performance: 
    references/12-performance.md
    - Instancing, LOD, batching, culling
  • Node Materials (TSL): 
    references/13-node-materials.md
    - Shader graphs, compute
  • 高级材质：
    references/11-materials-advanced.md
    - PBR、自定义着色器
  • 性能优化：
    references/12-performance.md
    - 实例化、LOD、批处理、剔除
  • 节点材质（TSL）：
    references/13-node-materials.md
    - 着色器图、计算着色器

Level 5: Specialized

级别5：专业领域

  • Physics: 
    references/14-physics-vr.md
    - Ammo, Rapier, Jolt, VR/XR
  • Advanced Loaders: 
    references/15-specialized-loaders.md
    - SVG, VRML, domain-specific
  • WebGPU: 
    references/16-webgpu.md
    - Modern backend, compute shaders
  • 物理与VR：
    references/14-physics-vr.md
    - Ammo、Rapier、Jolt、VR/XR
  • 高级加载器：
    references/15-specialized-loaders.md
    - SVG、VRML、特定领域加载器
  • WebGPU：
    references/16-webgpu.md
    - 现代后端、计算着色器

Quick Start Pattern

快速入门模板

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

External Resources

外部资源