深入解剖Three.js：从入门到实战，完整案例详解

目录

1. Three.js简介
2. 核心概念解析
   • 场景（Scene）
   • 相机（Camera）
   • 渲染器（Renderer）
   • 几何体（Geometry）
   • 材质（Material）
   • 网格（Mesh）
   • 光源（Light）
3. Three.js案例详解
   • 案例1：旋转立方体
   • 案例2：加载3D模型
   • 案例3：交互式3D场景
4. Three.js进阶技巧
   • 着色器（Shader）
   • 后期处理（Post-processing）
   • 物理引擎集成
5. 总结与资源推荐

---

1. Three.js简介

Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建和显示3D图形。它封装了WebGL的复杂性，提供了简单易用的API，使开发者能够快速构建3D场景、模型和动画。

Three.js广泛应用于游戏开发、数据可视化、产品展示、教育等领域。无论是初学者还是资深开发者，都可以通过Three.js实现令人惊叹的3D效果。

---

2. 核心概念解析

2.1 场景（Scene）

场景是Three.js中所有3D对象的容器。你可以将模型、光源、相机等添加到场景中。

const scene = new THREE.Scene();

2.2 相机（Camera）

相机决定了场景的视角。Three.js提供了多种相机类型，最常用的是透视相机（PerspectiveCamera）。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

2.3 渲染器（Renderer）

渲染器负责将场景和相机的内容渲染到屏幕上。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2.4 几何体（Geometry）

几何体定义了3D对象的形状。Three.js提供了多种内置几何体，如立方体、球体等。

const geometry = new THREE.BoxGeometry();

2.5 材质（Material）

材质定义了3D对象的外观。Three.js支持多种材质类型，如基础材质、Phong材质等。

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

2.6 网格（Mesh）

网格是几何体和材质的结合体，可以被添加到场景中。

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

2.7 光源（Light）

光源用于照亮场景。Three.js支持多种光源类型，如环境光、点光源等。

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

---

3. Three.js案例详解

案例1：旋转立方体

这是一个最简单的Three.js示例，展示如何创建一个旋转的立方体。

// 场景
const scene = new THREE.Scene();

// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

animate();

案例2：加载3D模型

通过GLTFLoader加载外部3D模型，并将其添加到场景中。

const loader = new THREE.GLTFLoader();
loader.load('model.glb', (gltf) => {
    const model = gltf.scene;
    scene.add(model);
});

案例3：交互式3D场景

实现鼠标点击交互，点击模型时改变其颜色。

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

window.addEventListener('mousedown', (event) => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children, true);

    if (intersects.length > 0) {
        intersects[0].object.material.color.set(0xff0000);
    }
});

---

4. Three.js进阶技巧

4.1 着色器（Shader）

通过编写自定义着色器，可以实现更复杂的视觉效果。

const vertexShader = `
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;

const fragmentShader = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

const shaderMaterial = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader
});

4.2 后期处理（Post-processing）

使用后期处理通道（如Bloom、SSAO）增强渲染效果。

const composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));

const bloomPass = new THREE.BloomPass();
composer.addPass(bloomPass);

4.3 物理引擎集成

将物理引擎（如Cannon.js）与Three.js结合，实现物理效果。

const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);

const sphereBody = new CANNON.Body({ mass: 1 });
sphereBody.addShape(new CANNON.Sphere(1));
world.addBody(sphereBody);

---

5. 总结与资源推荐

Three.js是一个功能强大且易于上手的3D图形库。通过学习其核心概念和实战案例，你可以快速掌握3D开发的基本技能。如果你希望深入学习，可以参考以下资源：

• Three.js官方文档
• Three.js示例库
• Three.js GitHub仓库

希望这篇文章能帮助你更好地理解和应用Three.js！如果你有任何问题或建议，欢迎在评论区留言讨论。

---

声明：本文为原创内容，转载请注明出处。