Three.js 入门指南：核心概念与基础3D图形绘制详解

Three.js 概述与选型分析

一、前言

Three.js 是一款基于 WebGL 标准的 3D 图形引擎，支持所有兼容 WebGL 的浏览器。它封装了底层复杂的 WebGL API，提供了高级开发接口，使开发者能够通过简洁的代码实现 3D 渲染效果。（官网地址：https://threejs.org/）

二、为什么选择 Three.js？

作为原生 WebGL 3D 引擎，Three.js 相比插件式引擎具有显著优势：无需用户安装额外插件，且在移动端设备上拥有更好的兼容性与支持。

Three.js 与其他主流原生 WebGL 3D 引擎的对比如下：

• Babylon.js：由 Microsoft 员工 David Cathue 主导开发的强大 3D 游戏引擎。与 Three.js 侧重动画表现不同，Babylon.js 更专注于游戏开发领域。
• PhiloGL：提供额外功能以使用本地 WebGL 接口。由于其 WebGL 接口并未完全封装，导致上手难度较高。
• SceneJS：一款开源 JavaScript 3D 引擎，特别适用于需要高精度细节的模型需求，如工程和医学领域常用的高精度模型展示。
• CopperLicht：被称为“商业级 WebGL 3D 引擎和编辑器”。虽然可以免费使用，但若需获取未压缩的完整版源码、支持文档及其他服务，则必须购买授权。

相较于上述 WebGL 3D 引擎，Three.js 还具备以下优势：

• 开发活跃，维护更新频繁；
• 文档齐全，案例丰富，易于学习；
• 设计灵活，便于扩展及增加新特性；

开发者可根据具体项目需求选择合适的 WebGL 3D 引擎。

Three.js 核心要素与基础搭建

三、开始使用 Three.js

1. 引导

在编写第一个 3D 程序之前，需要了解 Three.js 的基础知识。以下是构建 Three.js 3D 场景的五个核心要素：

1. 渲染器（render）

可以将渲染器想象为一块画布，我们需要在这块画布上绘制需要展示的内容。

2. 场景（scene）

场景相当于一个空间容器，我们需要将展示的对象放入这个空间中，然后再在画布上进行绘制。

3. 照相机（camera）

照相机相当于人的眼睛，只有设置好视角，我们才能看到物体。

4. 光源（light）

物体需要光照才能被看见，否则画面将是一片漆黑（但在某些特定情况下，展示物体可能不需要光源）。

5. 物体（object）

这是我们要表现的内容，包含形状和材质属性。

了解这五大要素后，即可开始编写代码。

2. 创建渲染器

首先，我们需要创建一个渲染器。创建渲染器主要有两种方式：

a. 在 HTML 中预先定义 canvas 元素

<canvas id="mainCanvas" width="600px" height="450px" ></canvas>
然后创建渲染器时绑定此元素
var renderer = new THREE.WebGLRenderer({
 canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(“#000”); // 设置渲染器背景为黑色

b. 不在 HTML 中创建 canvas 元素，而是使用普通的 div 等元素作为容器

<div id="mainCanvas" style="width:600px;height:450px;" ></div>
然后创建渲染器，放入容器中
var canvasContainer = document.getElementById('mainCanvas');
var width = canvasContainer.clientWidth; //获取画布的宽
var height = canvasContainer.clientHeight; //获取画布的高
var renderer = new THREE.WebGLRenderer({
 antialias: true //抗锯齿开
});
renderer.setSize(width, height); //设置渲染器的宽和高
renderer.setClearColor(0x000000); //设置渲染器的背景颜色为黑色
var canvas = renderer.domElement; //获取渲染器的画布元素
canvasContainer.appendChild(canvas); //将画布写入html元素中

这样，渲染器便创建成功。在创建渲染器时，还可以设置多个属性，例如抗锯齿、透明度等，具体详见 Three.js 官方文档。

3. 创建场景

渲染器创建完成后，接着创建场景，准备将需要绘制的对象放入场景中。

var scene = new THREE.Scene();

相机类型与视角设置

4. 创建照相机

常用的照相机有两种，一种称为正投影相机：

THREE.OrthographicCamera( left, right, top, bottom, near, far )；

下图展示了该照相机的视野范围：

另一种称为透视照相机：

THREE.PerspectiveCamera( fov, aspect, near, far ) ;

下图展示了该照相机的视野范围：

下图对比了两种照相机展示效果的差异：

**左侧为正投照相机，远近物体大小一致；右侧为透视照相机，呈现远小近大的效果，更接近人眼观察物体的感觉。**

在此以正投照相机为例：

var camera = new THREE.OrthographicCamera(-6, 6, 4.5, -4.5, 0, 50); //创建照相机
camera.position.set(35, 15, 25); //设置照相机的位置
camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置照相机面向(0,0,0)坐标观察

照相机默认坐标为 (0, 0, 0)；

默认观察方向为沿 Z 轴向里；

光源配置与物体创建

5. 创建光源

常用的光源类型包括：

1. 平行光 (DirectionalLight)，效果类似太阳光

DirectionalLight ( color, intensity )

color — 光源颜色的 RGB 数值。

intensity — 光强的数值。

2. 点光源 (PointLight)，效果类似灯泡

PointLight ( color, intensity, distance, decay )

color — 光源颜色的 RGB 数值。

intensity — 光强的数值。

distance -- 光强衰减至 0 处到光源的距离，0 表示无穷大。

decay -- 沿着光照距离的衰退量。

3. 聚光光源 (SpotLight)，效果类似聚光灯

SpotLight ( color, intensity, distance, angle, penumbra, decay )

color — 光源颜色的 RGB 数值。

intensity — 光强的数值。

distance -- 光强衰减至 0 处到光源的距离，0 表示无穷大。

angle -- 光线散射角度，最大值为 Math.PI/2。

penumbra -- 聚光锥的半影衰减百分比。取值在 0 和 1 之间，默认为 0。

decay -- 沿着光照距离的衰退量。

在此以点光源为例：

var light = new THREE.PointLight(0xffffff, 1, 100); //创建光源
light.position.set(12, 15, 10); //设置光源的位置
scene.add(light); //在场景中添加光源

6. 创建物体

制作物体的方法是 Mesh：

new THREE.Mesh(Geometry, Material);

Geometry 为物体的形状，Material 为物体的材质；

1. 形状 (Geometry)

Three.js 提供了多种生成固定形状的方法，例如长方体 (BoxGeometry)、球体 (SphereGeometry)、圆形 (CircleGeometry) 等。此外，还可以根据坐标生成具体形状，借助第三方建模软件建模后引入，转换为坐标后再生成，从而制作较为复杂的形状，如人脸、汽车等。

在此以长方体为例生成形状：

//设置正方体宽度，高度，深度分别为5,5,5
var geometry = new THREE.BoxGeometry (5, 5, 5);

2. 材质 (Material)

材质类似于物体的皮肤，决定物体外表的样子，例如物体的颜色、光滑度、贴图效果等。

常用材质包括：

· 网格基础材质 (MeshBasicMaterial)

该材质不受光照影响，无需光源即可显示，设置颜色后，各个面均为同一颜色。

· 网格法向材质 (MeshNormalMaterial)

该材质不受光照影响，无需光源即可显示，且每个方向的面颜色不同，但同一方向的面颜色相同。

该材质通常用于调试。

· 网格朗伯材质 (MeshLambertMaterial)

该材质受光照影响，没有光源时不会显示，用于创建表面暗淡、不光亮的物体。

· 网格 Phong 材质 (MeshPhongMaterial)

该材质受光照影响，没有光源时不会显示，用于创建光亮的物体。

在此以网格 Phong 材质为例创建材质：

var material = new THREE.MeshPhongMaterial({
  color: "yellow" //设置颜色为yellow
});

创建形状和材质之后，即可创建该物体：

//创建物体
var cube = new THREE.Mesh(geometry, material);

场景渲染与总结

7. 渲染画布

通过以上步骤，我们已经拥有了渲染器 (renderer)、场景 (scene)、照相机 (camera)、光源 (light) 和物体 (cube)，此时需要将光源和物体加入场景中：

scene.add(light);
scene.add(cube);

然后再使用渲染器将场景和照相机渲染出来：

renderer.render(scene, camera);

效果如下图所示：

四、结束语

在以上内容中，仅介绍了 Three.js 提供的基础功能，还有许多高级功能需要大家去探索。希望大家看完这篇文章后能对 Three.js 有一个初步的了解，并能够使用 Three.js 绘制出基础的 3D 图形。

大家可以前往 Three.js 官网的 examples 页面查看，里面包含许多优秀且典型的示例，并且提供代码下载，大家可以去研究探索一番。

在此附上几个精彩的例子供大家欣赏：

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对本站的支持。