一、前言

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

第二，为什么选择Three.js？

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

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

Babylon.js:一款功能强大的3D游戏引擎，由微软员工David Cathue开发。与Three.js相比，three.js更倾向于动画，而Babylon.js更适合游戏开发。附加功能被添加来帮助你使用本地网络总帐。WebGL接口没有完全封装，这使得PhiloGL很难入门。SceneJS:一个开源的JavaScript 3D引擎，特别适合需要高精度细节的模型，比如工程和医学中常用的高精度模型。CopperLicht:一款“商业级WebGL 3D引擎和编辑器”，可以免费使用，但如果想要获得源代码的未压缩完整版以及其他带有支持文档的服务，则需要购买授权。与这些web3D引擎相比，Three.js具有以下优势：

积极开发和维护；文档齐全，案例丰富，易学；设计灵活，扩展方便，功能新颖；我们可以根据自己的需求选择web3D引擎。

第三，开始三

1、指南

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

1.渲染器(渲染器)

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

2.场景(场景)

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

3.照相机

它相当于眼睛。如果我们想看物体，我们需要眼睛来看它们。

4.光源

物体需要光线才能被看到，否则它们是完全黑暗的(但在某些情况下，显示物体不需要光源)。

5、对象(object)

我们想要表现的将会有形状和材料属性。

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

2.创建渲染器

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

A.在html上写画布元素

canvas id=' main canvas ' width=' 600 px ' height=' 450 px '/canvas然后绑定此元素varrenderer=new three . webglrenderer({ canvas : document . getelementbyid(' main canvas ')})；renderer . setclearcolor(" # 000 ")；//将渲染器背景设置为黑色。b. html不创建画布元素，而是使用普通元素作为容器

div id=' mainCanvas ' style=' width :600 px；' height:450px'/div然后创建一个渲染器并将其放入容器中。var canvas容器=document . getelementbyid(' main canvas ')；var width=canvascontainer . client width；//获取canvas的宽度var height=canvas container . client height；//获取canvas=new three . webglrenderer({ anti IAS : true//抗锯齿})的高varrendererrenderer.setSize(宽度、高度)；//设置渲染器renderer.setclearcolor的宽度和高度(0x 000000)；//将渲染器的背景颜色设置为black var canvas=renderer.domElement//获取渲染器的canvascontainer . appendchild(canvas)元素；//将画布写入html元素，我们的渲染器创建成功。创建渲染器时，还可以设置几个属性，如抗锯齿、透明度等。详见三. js官方文件。

3.创造一个场景

创建渲染器后，我们将创建场景，并准备将我们需要绘制的东西放入场景中。

var场景=新三。场景()；4.创建相机

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

三个。正字法(左、右、上、下、近、远)；下图显示了摄像机的视野：

一种叫做透视相机：

三个。透视摄像机(视野、方位、远近)；下图显示了摄像机的视野：

下图显示了两台摄像机显示效果的对比：

* *左侧为正面投影摄像头，远近大小相同；右边是透视相机，远小近大，更接近人眼观察物体的感觉。**

这里以正投影摄影为例：

var camera=new THREE。正投影摄像机(-6，6，4.5，-4.5，0，50)；//创建camera.position.set(35，15，25)；//设置摄像头位置摄像头。看(新三。vector3 (0，0，0))；//将相机设置为面向(0，0，0)坐标，观察相机默认坐标为(0，0，0)；

默认方向是沿Z轴向内观察；

5.创建光源

常见的光源有：

1、方向性光线，效果类似于阳光

方向光(颜色、强度)

颜色—光源颜色的RBG值。

强度-光强度的数值。

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

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

颜色—光源颜色的RBG值。

强度-光强度的数值。

距离-距离光源的距离，这里光强度为0，0表示无穷大。

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

3、SpotLight，效果类似spotlight

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

颜色—光源颜色的RBG值。

强度-光强度的数值。

距离-距离光源的距离，这里光强度为0，0表示无穷大。

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

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

衰减-沿光照距离的下降量。

以点光源为例：

var light=new THREE。PointLight(0xffffff，1，100)；//创建光源light.position.set(12，15，10)；//设置光源场景的位置. add(light)；//在场景6中添加光源。创建对象

制作对象的方法是网格：

新的三。网格(几何、材料)；几何是物体的形状，材质是物体的材质；

1.形状(几何)

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

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

//将立方体的宽度、高度和深度设置为5，5，5 var geometry=new three . box geometry(5，5，5)；2.材料

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

常用的材料有：

网状基本材料

材质不受光照影响，无需光源即可显示。设置颜色后，所有面的颜色都相同。

网格法线材质(网格法线材质)

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

这种材料一般用于调试。

网格格伦布材料(MeshLambertMaterial)

这种材质会受到光照的影响，没有光源时不会显示。它用于创建表面暗淡无光的对象。

网状吸声材料(网状吸声材料)

这种材质会受到光照的影响，没有光源时不会显示。它被用来创造明亮的物体。

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

Var material=newthree。meshphongmaterial ({color: '黄色'/将颜色设置为黄色})；创建形状和材质后，可以创建对象：

//创建一个对象varcube=newthree.mesh(几何，材质)；7.渲染画布

通过以上步骤，我们已经有了渲染器、场景、相机、光源和立方体。此时，我们需要将光源和对象添加到场景中：

场景添加(光)；scene.add(立方体)；然后使用渲染器渲染场景和相机：

renderer.render(场景、摄像机)；效果如下：

四.结束语

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

可以去Three.js官网的例子。有一些优秀典型的例子，还有代码可以下载，可以学习探索。

这里有几个精彩的例子供大家欣赏：

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。谢谢你的支持。