Three.js

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

相关文档

• Three.js
• webGL

一、Three.js

Three.js是一个尽可能简化在网页端获取3D 内容的库。
three.js其实是使用WebGL来绘制三维效果的。 WebGL是一个只能画点、线和三角形的非常底层的系统. 想要用WebGL来做一些实用的东西通常需要大量的代码， 这就是Three.js的用武之地。它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能。

首先有一个渲染器(Renderer)。这可以说是three.js的主要对象。你传入一个场景(Scene)和一个摄像机(Camera)到渲染器(Renderer)中，然后它会将摄像机视椎体中的三维场景渲染成一个二维图片显示在画布上。

其次有一个场景图 它是一个树状结构，由很多对象组成，比如图中包含了一个场景(Scene)对象 ，多个网格(Mesh)对象，光源(Light)对象，群组(Group)，三维物体(Object3D)，和摄像机(Camera)对象。一个场景(Scene)对象定义了场景图最基本的要素，并包了含背景色和雾等属性。这些对象通过一个层级关系明确的树状结构来展示出各自的位置和方向。子对象的位置和方向总是相对于父对象而言的。比如说汽车的轮子是汽车的子对象，这样移动和定位汽车时就会自动移动轮子。你可以在场景图的这篇文章中了解更多内容。

注意图中摄像机(Camera)是一半在场景图中，一半在场景图外的。这表示在three.js中，摄像机(Camera)和其他对象不同的是，它不一定要在场景图中才能起作用。相同的是，摄像机(Camera)作为其他对象的子对象，同样会继承它父对象的位置和朝向。在场景图这篇文章的结尾部分有放置多个摄像机(Camera)在一个场景中的例子。

网格(Mesh)对象可以理解为用一种特定的材质(Material)来绘制的一个特定的几何体(Geometry)。材质(Material)和几何体(Geometry)可以被多个网格(Mesh)对象使用。比如在不同的位置画两个蓝色立方体，我们会需要两个网格(Mesh)对象来代表每一个立方体的位置和方向。但只需一个几何体(Geometry)来存放立方体的顶点数据，和一种材质(Material)来定义立方体的颜色为蓝色就可以了。两个网格(Mesh)对象都引用了相同的几何体(Geometry)和材质(Material)。

几何体(Geometry)对象顾名思义代表一些几何体，如球体、立方体、平面、狗、猫、人、树、建筑等物体的顶点信息。Three.js内置了许多基本几何体 。你也可以创建自定义几何体或从文件中加载几何体。

材质(Material)对象代表绘制几何体的表面属性，包括使用的颜色，和光亮程度。一个材质(Material)可以引用一个或多个纹理(Texture)，这些纹理可以用来，打个比方，将图像包裹到几何体的表面。

纹理(Texture)对象通常表示一幅要么从文件中加载，要么在画布上生成，要么由另一个场景渲染出的图像。

光源(Light)对象代表不同种类的光。

二、程序结构

1. 场景

sence API
场景定义了背景色、环境、雾等属性

import * as THREE from 'three';

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

// 设置背景色
scene.background = new THREE.Color(0x000000); // 黑色背景

// 添加雾效果
scene.fog = new THREE.Fog(0x000000, 10, 100); // 颜色、近平面、远平面

// 设置场景环境
scene.environment = new THREE.CubeTextureLoader().load([
    'px.jpg', 'nx.jpg',
    'py.jpg', 'ny.jpg',
    'pz.jpg', 'nz.jpg'
]);

// 添加对象到场景
scene.add(mesh);

// 从场景中移除对象
scene.remove(mesh);

// 获取场景中的所有对象
const objects = scene.children;

// 遍历场景中的对象
scene.traverse((object) => {
    if (object.isMesh) {
        // 处理网格对象
    }
});

CubeTexture立方纹理 创建一个由6张图片所组成的纹理对象 (左右上下前后)

2. camera

有两种相机设置：

透视相机（Perspective Camera）：模拟人眼视觉，物体距离相机越远，显示越小，这让3D场景更加逼真。
正交相机（Orthographic Camera）：物体大小不随距离变化而改变，适合需要保持平行比例的场景。

透视相机的关键参数包括视野角度（FOV）、宽高比（Aspect Ratio）、近裁剪面（Near Clip Plane）和远裁剪面（Far Clip Plane），这些控制了我们能看到的视角范围和深度。

/*
 * 2.创建相机(这里是 透视摄像机--用来模拟人眼所看到的景象)
 */
const camera = new THREE.PerspectiveCamera(
  75, // 视野角度
  window.innerWidth / window.innerHeight, // 长宽比
  0.1, // 进截面
  1000 // 远截面
);
// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera); // 将相机添加到场景中

3. render

有了场景和相机，我们还需要渲染器把对应的场景用对应的相机可见渲染出来，因此渲染器需要传入场景和相机参数。

/*
 *  3.初始化渲染器-设置渲染器大小及挂载元素
 */
const renderer = new THREE.WebGL1Renderer();
 
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x646479, 0); // 设置背景颜色 默认黑色
renderer.shadowMap.enabled = true; // 添加阴影的渲染
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
 
// 使用渲染器，通过相机将场景渲染出来
renderer.render(scene, camera);

4. 几何、材质和光照

在Three.js中，3D物体由几何、材质和光照共同构成。这些概念直接影响物体的外观和效果。

• 几何（Geometry）
  几何定义了物体的形状、尺寸和顶点结构。在Three.js中，几何是通过点、边和面来描述的。
  Three.js提供了很多内置几何体，如BoxGeometry（立方体）、SphereGeometry（球体）、PlaneGeometry（平面）、CylinderGeometry（圆柱体）等，可以通过简单的参数来创建这些基础形状。
  对于复杂的形状，可以使用Custom Geometry，即自定义顶点数据来定义几何体。
  

• 材质（Material）
  材质决定了物体的颜色、光泽、透明度和反光属性。
  常用的材质包括：

  • MeshBasicMaterial：不受光照影响的材质，只显示颜色或纹理。
  • MeshLambertMaterial：可受光照影响，适合模拟不反光的表面。
  • MeshPhongMaterial：比Lambert材质更光滑，可以模拟高光和反射效果。
  • MeshStandardMaterial：物理基础材质，能精确模拟真实物体的光照反应。
    通过材质，还可以应用纹理贴图，将图片应用到物体表面，形成如木纹、石纹等效果。
    

const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x666666 });
const lambertMaterial = new THREE.MeshLambertMaterial({ color: 0x666666 });
const phongMaterial = new THREE.MeshPhongMaterial({ color: 0x666666 });
const wireMaterial = new THREE.MeshBasicMaterial({ wireframe: true, color: 0x666666 });

• 光照（Light）
  在Three.js中，光照影响着场景中物体的亮度、阴影和反射。
  常见的光源类型有：
  • 环境光（Ambient Light）：无方向的全局光，均匀照亮所有物体，没有阴影。
  • 平行光（Directional Light）：从一个方向照射到整个场景，适合模拟太阳光。
  • 点光源（Point Light）：从某个点向四周发散，适合模拟灯泡、火把等。
  • 聚光灯（Spot Light）：类似手电筒的光照效果，有特定的方向和角度范围。
    光照不仅仅用来照亮物体，还可以通过光源的位置、颜色、强度来模拟不同的光影效果，从而让场景更有层次感。

5.Mesh

Mesh是Three.js中可渲染3D对象的基本单元，由几何体（Geometry）和材质（Material）组合而成。作为Object3D的子类，Mesh继承位置(position)、旋转(rotation)、缩放(scale)等三维变换属性。

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

6. 控制器

1. OrbitControls 轨道控制器

适用场景：适用于大多数需要旋转、缩放、平移查看的场景（如模型展示、地图浏览）。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 启用阻尼效果（惯性滑动）
controls.enableDamping = true;
controls.dampingFactor = 0.05;

// 限制缩放范围
controls.minDistance = 5;
controls.maxDistance = 50;

// 自动旋转
controls.autoRotate = true;
controls.value.autoRotateSpeed = 0.5; // 自动旋转速度

主要属性和方法

• controls.rotateSpeed：旋转速度，默认值为 1.0。
• controls.zoomSpeed：缩放速度，默认值为 1.2。
• controls.panSpeed：平移速度，默认值为 0.3。
• controls.staticMoving：静态移动，如果为 true，则没有惯性效果。
• controls.dynamicDampingFactor：动态阻尼系数，用于控制惯性效果。

注意事项
需在动画循环中调用 controls.update()，尤其是启用阻尼后。
窗口大小变化时需更新控制器：controls.handleResize()。