本文主要介绍Three.js的使用以及绘制基本三维图形的相关资料。很详细，对大家学习或使用Three.js有一定的参考价值，有需要的人来看看吧。

一、 前言

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

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

Three.js作为一个原生的web3D引擎，相比插件式的web3D引擎有着明显的优势：不需要安装插件，在移动端也有很好的支持。

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

Babylon.js:一个强大的3D游戏引擎，由微软员工David Cathue开发。与three.js相比，Three.js更喜欢动画，而Babylon.js更适合游戏开发。

PhiloGL:添加了额外的功能来帮助您使用本地WebGL。这个WebGL的接口不是100%封装的，导致PhiloGL很难上手。

SceneJS:开源的JavaScript 3D引擎，特别适合需要高精度细节的模型需求，比如工程和医学中常用的高精度模型。

CopperLicht:一个“商业级WebGL 3D引擎和编辑器”，你可以免费使用，但是如果你想获得未压缩的完整版源代码以及支持文档和其他服务，你需要购买授权。

与这些web3D引擎相比，Three.js具有以下优势：

并积极参与开发和维护；

文档完整，案例丰富，简单易学；

设计灵活，扩展方便，增加新功能；

我们可以根据自己的需求选择web3D引擎。

三、 开始Three.js

1、 引导

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

1.渲染器(渲染)

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

2.事件

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

3.照相机

相当于眼睛，我们需要眼睛来看东西。

4.光源

物体需要光线才能看到，或者是黑暗的(但在某些情况下，不需要光源来显示物体)。

5.目标

我们要表达的东西会有形状和材料属性。

了解了五行之后，就可以开始写我们的代码了。

2、 创建渲染器

首先，我们创建一个渲染器。创建渲染器有两种方法：

A.用html编写画布元素

canvas id= main canvas width= 600像素 height= 450px像素/canvas

然后在创建渲染器时绑定这个元素。

var渲染器=新三。WebGLRenderer({

canvas:document . getelementbyid( main canvas )

});

renderer . setclearcolor(" # 000 ")；//将渲染器背景设置为黑色

B.普通元素被用作容器，而不是在HTML中创建canvas元素。

div id= main canvas style= width:600 px；高度：450像素；/div

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

var canvas container=document . getelementbyid( main canvas )；

var width=canvas container . client width；//获取画布的宽度

var height=canvas container . client height；//获取画布的高度

var渲染器=新三。WebGLRenderer({

alias:true//抗锯齿开启

});

renderer.setSize(宽度，高度)；//设置渲染器的宽度和高度

renderer . setclearcolor(0x 000000)；//将渲染器的背景色设置为黑色

var canvas=renderer.domElement//获取渲染器的画布元素

canvas container . appendchild(canvas)；//将画布写入html元素

这样，我们的渲染器就创建成功了。创建渲染器时，还可以设置多个属性，如抗锯齿、透明度等。详见three.js官方文档。

3、 创建场景

渲染器创建完成后，我们将创建一个场景，并准备将我们需要绘制的内容放入场景中。

var场景=新三。场景()；

4、 创建照相机

常用的摄像机有两种，一种叫做正投影摄像机：

三个。OrthographicCamera(左、右、上、下、近、远)；

下图是这款相机的视野：

一种叫做透视照相机：

三个。PerspectiveCamera( fov，aspect，near，far)；

下图是这款相机的视野：

下图是两款相机的对比：

* *左边是前置投影摄像头，在距离上大小相同；右边的相机是透视相机，远小近大，更接近人眼观察物体的感觉。**

这里以正投影摄影为例：

var相机=新三。OrthographicCamera(-6，6，4.5，-4.5，0，50)；//创建一个摄像机

camera.position.set(35，15，25)；//设置摄像机的位置

camera.lookAt(新三。向量3(0，0，0))；//设置相机看(0，0，0)坐标。

默认的相机坐标是(0，0，0)；

默认方向是沿着Z轴向内看；

5、 创建光源

常见的光源有：

1、DirectionalLight，效果类似于阳光。

方向光(颜色、强度)

颜色-光源颜色的RBG值。

强度—光强度的值。

2.点光源，类似于灯泡。

点光源(颜色，强度，距离，衰减)

颜色-光源颜色的RBG值。

强度—光强度的值。

距离——距离光强为0的光源的距离，0表示无限远。

衰减-沿照明距离的衰减量。

3.聚光灯，效果和聚光灯差不多。

聚光灯(颜色、强度、距离、角度、半影、衰减)

颜色-光源颜色的RBG值。

强度—光强度的值。

距离——距离光强为0的光源的距离，0表示无限远。

角度-光散射角度，最大值是数学。/2。

半影-聚光锥的半影衰减百分比。介于0和1之间的值。默认值为0。

衰减-沿照明距离的衰减量。

以点光源为例：

var光=新三。点光源(0xffffff，1，100)；//创建一个光源

light.position.set(12，15，10)；//设置光源的位置

scene.add(灯光)；//为场景添加光源

6、 创建物体

制造物体的方法是网格：

新三。网格(几何、材质)；

几何是物体的形状，质料是物体的材料；

1、形状(几何形状)

Three.js给出了很多生成固定形状的方法，比如BoxGeometry，SphereGeometry，CircleGeometry等等。还有一种根据坐标生成特定形状的方法，可以借助第三方建模软件建模后导入，转换成坐标后生成，这样就可以做出更复杂的形状，比如人脸、汽车等等。

这里以长方体为例生成一个形状：

//将立方体的宽度、高度和深度分别设置为5、5和5。

var几何=新三。BoxGeometry (5，5，5)；

2.材料

材质就像物体的皮肤，决定了物体的外观，比如物体的颜色，看起来是否光滑，是否有质感等等。

常用的材料有：

MeshBasicMaterial(网格基础材料)

该材料不受光的影响，可以在没有光源的情况下显示。设置颜色后，所有表面都是相同的颜色。

网格正常材料(网格正常)

材质不受光线影响，没有光源也能显示，而且每个方向的表面颜色不一样，但是同一个方向的表面颜色是一样的。

这种材料一般用于调试。

网格Grembo材质(MeshLambertMaterial)

这种材质会受到光线的影响，在没有光源的情况下不会显示出来。它用于创建表面暗淡无光的对象。

网状材料

这种材质会受到光线的影响，在没有光源的情况下不会显示出来。它被用来创造明亮的物体。

这里，以网格Phong材质为例创建一个材质：

var材质=新三。网状材料({

颜色：黄色//将颜色设置为黄色

});

创建形状和材质后，您可以创建对象：

//创建一个对象

var cube=新三。网格(几何、材质)；

7、 渲染画布

通过以上步骤，我们已经有了渲染器(renderer)、场景(scene)、摄像机(camera)、光源(light)和物体(cube)。此时，我们需要将光源和对象添加到场景中：

scene.add(灯光)；

scene.add(立方体)；

然后使用渲染器渲染场景和摄影机：

renderer.render(场景、相机)；

效果如下：

四、 结束语

以上内容，只写了Three.js提供的基本功能，还有很多高级功能需要你去探索。希望你看完这篇文章能对Three.js有一个初步的了解，并能使用Three.js绘制基本的3D图形。

可以去Three.js官网的例子看看。有一些很优秀很典型的例子，有代码可以下载。你可以研究和探索它们。

以下是一些精彩的例子，供大家欣赏：

总结

这就是本文的全部内容。希望这篇文章的内容能给你的学习或者工作带来一些帮助。有问题可以留言交流。谢谢你的支持。