Three.js 入门：如何使用并绘制基础 3D 图形-卡咪卡咪哈-一个博客

一、前言

Three.js 是一款 webGL（3D绘图标准，在此不赘述）引擎，可以运行于所有支持 webGL 的浏览器。Three.js 封装了 webGL 底层的 API ，为我们提供了高级的开发接口，可以使用简单的代码去实现 3D 渲染。（官网：https://threejs.org/）

Jason 岂安科技前端研发工程师

三年互联网前端开发经验，曾参与过多个系统框架的搭建和组件开发，负责岂安科技产品的数据可视化和公用组件开发。

更多干货内容关注微信公众号：bigsec

二、为什么要选择Three.js？

Three.js 作为原生 web3D 引擎，对插件式 web3D 引擎的优势不言而喻：不需要安装插件、在移动端支持好。

Three.js 与其他原生 web3D 引擎对比：

Babylon.js：一个强大的 3D 游戏引擎，由 Microsoft 的员工 David Cathue 主导开发。和 Three.js 相比，three.js 更倾向于动画，而 Babylon.js 则更适合游戏开发。PhiloGL：增加了额外的功能帮助你可以使用本地的 WebGL ，这个 WebGL 的接口不是百分之百的被封装好了的，这使得 PhiloGL 上手难度较高。SceneJS：一个开源的 JavaScript 3D 引擎，特别适合需要高精度细节的模型需求，比如工程学和医学上常用的高精度模型。CopperLicht：一个“商业级别的 WebGL 3D 引擎和编辑器”，你可以免费使用，但是要想获得未压缩的完整版带支持文档的源码和其他服务，则需要购买授权。

相对这些 web3D 引擎，Three.js 的还有以下几点优势：

开发和维护比较活跃；文档齐全，案例丰富，易于学习；设计灵活、方便拓展以及增加新的特性；我们可以根据自己的需要去选择web3D引擎。

三、开始Three.js

1、引导

在开始我们的第一个 3D 程序之前，我们需要了解 Three.js 的一些基础，以下是 Three.js 制作 3D 的五要素：

a. 渲染器（render）

我们可以把渲染器想想成为一个画布，我们需要在这个画布上去画出我们需要展示的东西。

b. 场景（scene）

相当于一个空间，我们需要将展示的东西放在这个空间里，然后再在画布上绘制出来。

c. 照相机（camera）

相当于眼睛，我们想要看到物体，就需要眼睛去看。

d. 光源（light）

物体需要光照才能看见，不然就是漆黑一片（但是在某些情况下展示物体不需要光源）。

e. 物体（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 元素，而是使用普通的元素作为容器

然后创建渲染器，放入容器中

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、创建光源

常用光源有：

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

DirectionalLight ( color, intensity )

color — 光源颜色的RBG数值。

intensity — 光强的数值。

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

PointLight ( color, intensity, distance, decay )

color — 光源颜色的RBG数值。

intensity — 光强的数值。

distance — 光强为0处到光源的距离，0表示无穷大。

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

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

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

color — 光源颜色的RBG数值。

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 为物体的材质；

a. 形状(Geometry)

three.js 给出了很多方法去生成固定的形状，比如长方体(BoxGeometry)、球体(SphereGeometry)、圆形(CircleGeometry)等等。还有根据坐标去生成具体形状的方法，可以借助第三方建模软件建模之后引入，转换为坐标后再生成，就可以做比较复杂的形状了，比如人脸、汽车等等。

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

//设置正方体宽度，高度，深度分别为5,5,5

var geometry = new THREE.BoxGeometry (5, 5, 5);

b. 材质(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);

效果如下图：