本文主要介绍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官网的例子看看。有一些很优秀很典型的例子，有代码可以下载。你可以研究和探索它们。
以下是一些精彩的例子，供大家欣赏：
总结
这就是本文的全部内容。希望这篇文章的内容能给你的学习或者工作带来一些帮助。有问题可以留言交流。谢谢你的支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。