探索Three.js

🚀探索Three.js：Web3D开发的神奇钥匙

引言
在当今数字化时代，Web3D 技术正以前所未有的速度改变着我们与网页内容交互的方式。从早期简单的 2D 页面展示，到如今能够在浏览器中呈现出逼真的三维场景、模型和动画，Web3D 技术的发展历程充满了创新与突破。它的出现，不仅为网页增添了更加丰富和沉浸式的体验，还广泛应用于游戏、虚拟现实（VR）、增强现实（AR）、产品展示、教育培训、建筑设计等众多领域，成为推动各行业数字化转型的重要力量。

在 Web3D 技术的生态体系中，Three.js 脱颖而出，成为众多开发者构建 3D 网页应用的首选工具。Three.js 是一个基于 JavaScript 的开源 3D 库，它构建于 WebGL 之上，极大地简化了 WebGL 复杂的底层操作，使得开发者无需深入掌握图形学和 WebGL 的细节，就能轻松创建出绚丽多彩的 3D 场景和交互效果。无论是开发一个简单的 3D 产品展示页面，还是打造一款复杂的 3D 网页游戏，Three.js 都能提供强大而便捷的功能支持。

接下来，让我们一同深入探索 Three.js 的世界，了解它的基本概念、核心特性，通过实际代码示例掌握其使用方法，并探讨如何优化性能，让 3D 应用在网页上流畅运行。

---

💡 什么是 Three.js？

Three.js 是一个基于 WebGL 的 JavaScript 3D 渲染库。它封装了大量底层 API，让我们可以使用更直观的方式来创建和控制 3D 场景。

主要优势包括：

• 简化 WebGL 的复杂操作
• 丰富的内置几何体、材质、灯光、阴影、后处理
• 社区活跃、文档完善

---

🔍 关键概念解读

名称	解释
Scene（场景）	所有物体的容器，类似舞台
Camera（相机）	决定我们从哪个角度看场景
Renderer（渲染器）	把 3D 场景渲染到页面上
Light（光源）	模拟现实世界中的各种光照效果
Geometry（几何体）	如立方体、球体等的形状
Material（材质）	决定物体外观，如颜色、纹理
Mesh（网格）	几何体和材质组合后的物体

---

🧠 Three.js 核心架构剖析

🏙️ 场景（Scene）

在 Three.js 中，场景就像是一个巨大的 3D 容器，是整个 3D 世界的基础架构。它承载着所有你想要展示的 3D 元素，包括各种形状的物体、不同类型的光源以及控制观察视角的相机等。你可以把场景想象成一个舞台，舞台上可以布置各种道具（物体），设置不同的灯光效果（光源），而观众观看舞台的角度则由相机来决定。

通过THREE.Scene()构造函数可以轻松创建一个场景对象，例如：

const scene = new THREE.Scene();

创建好场景后，就可以向其中添加各种元素。比如添加一个简单的立方体：

// 创建立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000 });
// 创建网格对象，将几何体和材质组合
const cube = new THREE.Mesh(geometry, material);
// 将立方体添加到场景中
scene.add(cube);

场景不仅是元素的集合，还可以控制这些元素的一些全局属性，例如场景的背景颜色、环境光等。通过设置场景的背景颜色，可以营造出不同的氛围，如：

scene.background = new THREE.Color(0x0000ff); // 设置背景颜色为蓝色

📷 相机（Camera）

相机在 Three.js 中扮演着至关重要的角色，它定义了观察者在场景中的视角以及可见范围，就如同我们用眼睛观察世界或者使用摄像机拍摄画面一样。Three.js 提供了多种类型的相机，其中最常用的是透视相机（PerspectiveCamera）和正交相机（OrthographicCamera） 。

透视相机主要用于模拟人眼观察物体的效果，具有近大远小的特点，能够呈现出更加逼真的三维场景。在初始化透视相机时，需要设置几个关键参数：

const camera = new THREE.PerspectiveCamera(
    75, // 摄像机视锥体垂直视野角度（field of view），值越大，视角越广，场景看起来越“近”
    window.innerWidth / window.innerHeight, // 摄像机视锥体长宽比，通常根据窗口的宽高比来设置
    0.1, // 摄像机视锥体近端面，距离相机小于此值的物体将不会被渲染
    1000 // 摄像机视锥体远端面，距离相机大于此值的物体将不会被渲染
);

通过调整这些参数，可以实现不同的视觉效果。例如，增大垂直视野角度，会使场景看起来更加宽广，物体显得更小；调整近端面和远端面的值，可以控制渲染的范围，避免不必要的渲染开销 。

正交相机则没有透视效果，无论物体离相机远近，其大小都保持不变。它通常用于渲染 2D 场景或者需要保持物体尺寸比例不变的情况，比如绘制地图、UI 元素等。正交相机的初始化参数如下：

const camera = new THREE.OrthographicCamera(
    -window.innerWidth / 2, // 摄像机视锥体左侧面
    window.innerWidth / 2, // 摄像机视锥体右侧面
    window.innerHeight / 2, // 摄像机视锥体上侧面
    -window.innerHeight / 2, // 摄像机视锥体下侧面
    0.1, // 摄像机视锥体近端面
    1000 // 摄像机视锥体远端面
);

这些参数定义了一个矩形的可视区域，只有在这个区域内的物体才会被渲染。通过调整这些参数，可以改变可视区域的大小和位置 。

除了基本的参数设置，相机还可以通过position属性来设置其在场景中的位置，通过lookAt方法来指定相机的观察方向。例如，将相机放置在 (0, 0, 5) 的位置，并让它看向原点 (0, 0, 0)：

camera.position.set(0, 0, 5);
camera.lookAt(0, 0, 0);

🎨 渲染器（Renderer）

渲染器是 Three.js 中将 3D 场景和相机中的内容绘制到浏览器窗口中的关键组件，它就像是一位技艺精湛的画师，根据场景、相机以及其中的物体和光源等信息，将虚拟的 3D 世界呈现在用户眼前。在 Three.js 中，最常用的渲染器是WebGLRenderer，它基于 WebGL 技术，能够在浏览器中实现高性能的 3D 图形渲染 。

创建一个WebGLRenderer实例非常简单：

const renderer = new THREE.WebGLRenderer();

创建渲染器后，通常需要设置其大小，以适应浏览器窗口的尺寸：

renderer.setSize(window.innerWidth, window.innerHeight);

这样，渲染器就会按照指定的大小来绘制 3D 场景。此外，还可以设置渲染器的其他属性，比如是否开启抗锯齿（antialias）、是否支持透明度（alpha）等，以优化渲染效果：

const renderer = new THREE.WebGLRenderer({
   
    antialias: true, // 开启抗锯齿，使渲染的图形边缘更加平滑
    alpha: true // 支持透明度，可用于创建透明背景的3D场景
});

最后，通过render方法将场景和相机的内容渲染到浏览器中：

renderer.render(scene, camera);

这个过程会根据场景中的物体、材质、光源以及相机的视角等信息，计算出每个像素的颜色值，并绘制到浏览器的画布上。在实际应用中，通常会将渲染过程放在一个动画循环中，通过不断更新场景中的物体位置、旋转角度等属性，实现动态的 3D 效果 。

☀️ 光源（Light）

光源在 Three.js 的 3D 场景中起着至关重要的作用，它能够模拟现实世界中的各种光照效果，为场景中的物体增添立体感、质感和真实感。Three.js 提供了多种类型的光源，每种光源都有其独特的特性和用途，通过合理组合和设置这些光源，可以创建出各种丰富多样的光照场景 。

环境光（AmbientLight）是一种没有特定方向的均匀光源，它会平等地照亮场景中的所有物体，不会产生明显的阴影效果。环境光主要用于提供一个基本的全局光照，确保场景中没有完全黑暗的区域。例如，创建一个强度适中的环境光：

const ambientLight = new THREE.AmbientLight(0x404040, 0.5); // 颜色为灰色，强度为0.5
scene.add(ambientLight);

点光源（PointLight）就像生活中的灯泡，光线从一个点向四面八方发射。点光源的强度会随着距离的增加而衰减，适合模拟局部的光照效果，比如照亮一个特定的物体或区域。创建一个点光源并设置其位置和强度：

const pointLight = new THREE.PointLight(0xff0000, 1, 10); // 颜色为红色，强度为1，最大距离为10
pointLight.position.set(2, 3, 1);
scene.add(pointLight);

平行光（DirectionalLight）的光线是平行且方向一致的，通常用于模拟太阳光等来自远处的光源。它可以产生阴影效果，使场景更加逼真。设置平行光的方向和强度：

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 7); // 设置光源位置
directionalLight.castShadow = true; // 启用阴影
scene.add(directionalLight);

聚光灯（SpotLight）从一个点向特定方向发射锥形光束，具有聚焦效果，常用于模拟手电筒、舞台灯光等。可以设置聚光灯的角度、衰减、颜色等属性：

const spotLight = new THREE.SpotLight(0x00ff00, 1);
spotLight.position.set(0, 5, 0);
spotLight.angle = Math.PI / 6; // 光束角度
spotLight.penumbra = 0.5; // 柔边效果
scene.add(spotLight);

半球光（HemisphereLight）模拟天空和地面的光照效果，它有两个颜色属性，一个用于模拟天空的颜色，另一个用于模拟地面反射的颜色，适合创建自然环境光照：

const hemiLight = new THREE.HemisphereLight(0x87CEEB, 0xFFFFFF, 0.6); // 天空蓝和白色光，强度为0.6
scene.add(hemiLight);

🟩 几何体（Geometry）

几何体是 Three.js 中构建 3D 物体的基本元素，它定义了物体的形状和结构，通过不同的几何体组合和变形，可以创建出各种复杂的 3D 模型。Three.js 提供了丰富的内置几何体类型，涵盖了常见的几何形状，同时也支持自定义几何体的创建，以满足更复杂的建模需求 。

常见的内置几何体包括：

立方体几何体（BoxGeometry）：用于创建立方体形状，通过设置宽度、高度和深度参数，可以控制立方体的大小。例如，创建一个边长为 1 的立方体：

const geometry = new THREE.BoxGeometry(1, 1, 1);

球体几何体（SphereGeometry）：用于创建球体，需要设置半径、经度分段数和纬度分段数等参数。分段数越多，球体表面越光滑，但计算量也会相应增加。创建一个半径为 0.5 的球体，设置合适的分段数以获得较好的平滑效果：

const geometry = new THREE.SphereGeometry(0.5, 32, 32);

圆柱体几何体（CylinderGeometry）：可以创建圆柱体，通过设置顶部半径、底部半径、高度、圆周分段数和垂直分段数等参数，能够灵活调整圆柱体的形状。例如，创建一个顶部和底部半径均为 0.3，高度为 1 的圆柱体：

const geometry = new THREE.CylinderGeometry(0.3, 0.3, 1, 32);

平面几何体（PlaneGeometry）：用于创建平面，可设置宽度和高度以及分段数。常用于创建地面、墙面等平面物体。创建一个宽为 5，高为 3 的平面：

const geometry = new THREE.PlaneGeometry(5, 3);

圆锥体几何体（ConeGeometry）：用于创建圆锥体，设置底部半径、高度、分段数等参数来定义其形状。例如，创建一个底部半径为 0.5，高度为 1 的圆锥体：

const geometry = new THREE.ConeGeometry(0.5, 1, 32);

除了这些常见的几何体，Three.js 还提供了如圆环几何体（TorusGeometry）、多面体几何体（PolyhedronGeometry）等其他类型，以满足不同的建模需求。

在实际应用中，还可以通过BufferGeometry来自定义几何体，通过手动定义顶点、面、法线等几何信息，实现更加复杂和独特的形状。例如，创建一个简单的自定义三角形几何体：

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
    0, 0, 0,
    1, 0, 0,
    0, 1, 0
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

🧪 材质（Material）

材质在 Three.js 中用于定义物体的外观和质感，它决定了物体如何反射和吸收光线，以及呈现出何种颜色、纹理和光泽等效果。不同的材质类型可以模拟出各种真实世界中的材料，如金属、木材、塑料、玻璃等，为 3D 场景增添丰富的细节和真实感 。

Three.js 提供了多种材质类型，每种材质都有其独特的属性和特点。

基础网格材质（MeshBasicMaterial）是一种简单的材质，它不受光照的影响，无论场景中是否有光源，物体都会显示为设置的颜色。常用于不需要光照效果的简单物体，或者用于调试和演示目的。例如，创建一个红色的基础网格材质：

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

漫反射网格材质（MeshLambertMaterial）会受到光照的影响，能够模拟出物体表面的漫反射效果，使物体看起来更加自然。它没有镜面反射，适合模拟表面粗糙的物体，如木材、布料等。创建一个绿色的漫反射网格材质：

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

镜面反射网格材质（MeshPhongMaterial）不仅考虑了漫反射，还添加了镜面反射效果，能够模拟出光滑物体表面的高光反射，使物体看起来更加光亮。常用于模拟金属、塑料等表面光滑的物体。设置一个蓝色的镜面反射网格材质，并调整其高光颜色和强度：

const material = new THREE.MeshPhongMaterial(