深度解析 Three.js：从核心概念到高级特性，打造惊艳的 3D 网页应用

冬冬小圆帽

于 2025-03-23 23:46:56 发布

阅读量1.2k

点赞数 30

文章标签： javascript 3d 数码相机

本文链接：https://blog.csdn.net/m0_72900140/article/details/146464773

版权

Three.js 是一个基于 WebGL 的 JavaScript 3D 图形库，旨在简化在浏览器中创建和渲染 3D 内容的复杂性。它提供了丰富的 API 和工具，使开发者能够快速构建复杂的 3D 场景、动画和交互式应用。以下是对 Three.js 的深度解析，涵盖其核心概念、架构、工作流程以及高级特性。

1. Three.js 的核心概念

Three.js 的核心围绕以下几个关键概念构建：

1.1 场景（Scene）

场景是 Three.js 中所有对象的容器，类似于一个舞台。它包含了 3D 对象、灯光、相机等。
通过 THREE.Scene 类创建场景。
场景本身不渲染任何内容，而是作为渲染器的输入。

const scene = new THREE.Scene();

1.2 相机（Camera）

相机决定了场景的哪一部分会被渲染到屏幕上。
常用的相机类型：
- 透视相机（PerspectiveCamera）：模拟人眼的视角，具有近大远小的效果。
- 正交相机（OrthographicCamera）：物体大小不受距离影响，适合 2D 或等距视图。

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

1.3 渲染器（Renderer）

渲染器负责将场景和相机的内容渲染到 HTML 画布（Canvas）中。
常用的渲染器是 WebGLRenderer，它使用 WebGL 技术进行硬件加速渲染。

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

1.4 几何体（Geometry）

几何体定义了 3D 对象的形状和结构。
Three.js 提供了多种内置几何体，如立方体（BoxGeometry）、球体（SphereGeometry）、平面（PlaneGeometry）等。

const geometry = new THREE.BoxGeometry();

1.5 材质（Material）

材质定义了物体的外观，包括颜色、纹理、光照反射等。
常用材质：
- MeshBasicMaterial：基础材质，不受光照影响。
- MeshPhongMaterial：支持高光和反射。
- MeshStandardMaterial：基于物理的渲染（PBR）材质。

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

1.6 网格（Mesh）

网格是几何体和材质的结合体，代表一个可渲染的 3D 对象。
通过 THREE.Mesh 类创建网格。

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

1.7 灯光（Light）

灯光用于照亮场景中的物体。
常用灯光类型：
- AmbientLight：环境光，均匀照亮所有物体。
- DirectionalLight：平行光，模拟太阳光。
- PointLight：点光源，向所有方向发光。
- SpotLight：聚光灯，具有方向性和锥形范围。

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

2. Three.js 的工作流程

Three.js 的典型工作流程如下：

创建场景：使用 THREE.Scene 创建一个场景。
添加对象：将几何体、材质、灯光等添加到场景中。
设置相机：定义相机的位置、视角和投影方式。
创建渲染器：使用 WebGLRenderer 渲染场景。
动画循环：通过 requestAnimationFrame 实现动画效果。

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

3. Three.js 的高级特性

Three.js 提供了许多高级功能，用于创建更复杂的 3D 应用：

3.1 纹理（Texture）

纹理可以应用于材质，为物体添加细节。
支持加载图片、视频、Canvas 等作为纹理。

const texture = new THREE.TextureLoader().load('texture.jpg');
const material = new THREE.MeshBasicMaterial({ map: texture });

3.2 加载器（Loader）

Three.js 提供了多种加载器，用于加载 3D 模型、纹理、音频等资源。
常用加载器：
- GLTFLoader：加载 GLTF 格式的 3D 模型。
- OBJLoader：加载 OBJ 格式的模型。
- TextureLoader：加载图片纹理。

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

3.3 阴影（Shadow）

Three.js 支持动态阴影效果。
需要启用渲染器的阴影映射功能，并为灯光和物体设置阴影属性。

renderer.shadowMap.enabled = true;
light.castShadow = true;
cube.castShadow = true;

3.4 后期处理（Post-processing）

后期处理允许在渲染完成后对图像进行额外处理，如模糊、辉光、色彩校正等。
使用 EffectComposer 实现。

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

3.5 物理引擎集成

Three.js 可以与物理引擎（如 Cannon.js、Ammo.js）集成，实现碰撞检测、刚体动力学等物理效果。

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

4. Three.js 的性能优化

减少绘制调用：合并几何体，使用 BufferGeometry。
使用低多边形模型：简化模型以减少计算量。
启用 GPU 加速：使用 WebGL 渲染器并优化着色器。
按需渲染：仅在场景变化时调用渲染函数。

5. Three.js 的应用场景

游戏开发：创建 3D 网页游戏。
数据可视化：将复杂数据以 3D 形式呈现。
虚拟现实（VR）：结合 WebXR 实现 VR 体验。
产品展示：在网页中展示 3D 产品模型。
教育工具：创建交互式 3D 教学应用。

6. 学习资源

官方文档：https://threejs.org/docs/
示例库：https://threejs.org/examples/
GitHub 仓库：https://github.com/mrdoob/three.js
社区论坛：Three.js 的官方论坛和 Discord 频道。

通过掌握 Three.js 的核心概念和高级特性，开发者可以创建出令人惊叹的 3D 网页应用，同时利用其丰富的生态系统和社区支持，快速实现复杂的 3D 功能。