的使用和阅读Threejs基本的三维图形绘制

一、前言
阅读Three js是WebGL（3D制图标准，这里没有描述）引擎，可以运行在所有的浏览器支持WebGL webgl.three.js封装了底层的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接口是不封装的百分之一百，这使得philogl上手难度。
SceneJS：一个开源的Javaｓｃｒｉｐｔ的3D引擎，特别是对模型精度要求高和细节，如常用的工程和医学中的高精度模型。
CopperLicht：一个商业级的WebGL的3D引擎和编辑器，你可以免费的使用它，但如果你想与源和其他服务支持文件得到压缩的完整版本，你需要购买授权。

相比这些Web3D引擎、阅读Three js具有以下优点：

开发和维护更加活跃；
文件齐全，案例丰富，易学易学。
设计灵活，易于扩展，增加新功能。

我们可以根据我们的需要选择Web3D引擎。

三。开始阅读Three js
1、指导
在我们开始我们的第一个3D程序，我们需要了解一些基础的阅读Three js，以下是五行阅读Three js制作3D：

1。渲染（Render）
我们可以把渲染器作为画布，我们需要在画布上画出我们需要的显示。
2，现场（场景）
它相当于一个空间，我们需要把显示在这个空间里的东西放在画布上。
三.照相机（照相机）
是眼睛，我们想看物体，我们需要眼睛去看。
4，光源（灯）
物体需要光才能看到，否则就很暗（但在某些情况下，物体不需要光源）。
5。对象（对象）
我们想展示的是形状和材料特性。
在了解了五个元素之后，就可以开始编写代码了。

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

在HTML上编写画布元素
然后把这个元素在渲染了
VaR渲染=新three.webglrenderer（{
帆布：document.getelementbyid（'maincanvas）
}）；
Renderer.setClearColor（# / / 000）；设置渲染的黑色背景
b. HTML不创建画布元素，而是使用普通元素作为容器。
然后创建渲染器放在容器
无功canvascontainer = document.getelementbyid（'maincanvas）；
VaR的宽度= canvascontainer.clientwidth； / /把画布的宽度
VaR高度= canvascontainer.clientheight； / /把帆布高
VaR渲染=新three.webglrenderer（{
Antialias：真 / /打开抗锯齿
}）；
renderer.setsize（宽度，高度）； / /设置渲染器的宽度和高度
Renderer.setClearColor（0x000000）； / /黑色渲染设置背景颜色
VaR的画布renderer.domelement； / /把画布元素渲染
canvascontainer.appendchild（帆布）； / /会在画布上写的HTML元素
这样，我们的渲染器是成功的，当你创建一个渲染器，你也可以设置多个属性，如反走样，透明度，等等，看看阅读Three js的官方文件。

三.创建一个场景
在渲染器创建，我们创建的场景，准备把我们需要绘制的场景。
var场景=新三。场景（）；
4。创建一个摄像机
有两种常用的照相机，一种叫正交照相机：
three.orthographiccamera（左、右、顶部、底部、近、远）；
下图是照相机的视图：
一种叫透视照相机。
three.perspectivecamera（FOV，方面，近、远）；
下图是照相机的视图：
下图是两个相机显示器的对比。
***的左边是一个正面摄像机，大小都差不多，右边是一个透视照相机，远小而且近，接近人眼的感觉。

下面是一个正投影的例子。
VaR相机=新three.orthographiccamera（6，4.5，6，4.5，0, 50）； / /创建一个摄像机
camera.position.set（35, 15, 25）； / /设置相机的位置
Camera.lookAt（新three.vector3（0, 0, 0））； / /相机设置为（0,0,0）坐标观测
相机的默认坐标（0,0,0）；
沿z轴观察到默认方向。
5。创建光源
公共光源是：

1、平行光（平行光），效果类似于太阳
DirectionalLight（颜色、强度）
颜色的光源的颜色的RGB值。
亮度-光强值。

2、点光源（清淡），效果类似于灯泡
PointLight（颜色、强度、距离、衰减）
颜色的光源的颜色的RGB值。
亮度-光强值。
距离-光强是从0到光源的距离，0是无穷远。
衰减-光距离的下降。

3，光源（聚光灯），效果类似于聚光灯。
聚光灯（颜色、强度、距离、角度、半影、衰减）
颜色的光源的颜色的RGB值。
亮度-光强值。
距离-光强是从0到光源的距离，0是无穷远。
角-光散射角，最大值是数学。pi 2。
半影-聚光灯锥中半影衰减的百分比。在0到1之间的值。默认值是0。
衰减-光距离的下降。

这里有一个点源，例如：
VAR光=新three.pointlight（0xffffff，1, 100）； / /创造光明
light.position.set（12, 15, 10）； / /设置光源的位置
Scene.add（光）； / /添加一个光源的场景
6。Create objects
制造物体的方法是网格：
新三。网格（几何，材料）；
几何学是物体的形状，材料是物体的材料。

1，形状（几何）
阅读Three js给出若干生成固定形状的方法，如BoxGeometry、spheregeometry，circlegeometry，等等。也有生成基于坐标的特定形状的方法，可以通过第三方软件建模，转换成坐标介绍。然后，它可以生成更复杂的形状，如人脸、汽车等。
在这种情况下，以矩形的形状为例。
设置/立方宽度，高度，深度为5,5,5
VAR几何=新three.boxgeometry（5, 5, 5）；
2，材料（材料）
物质就像物体的外壳，决定物体的外观，比如物体的颜色，物体看起来是否光滑，或者是否有地图等。

常用材料有：

网格的基础材料（meshbasicmaterial）
这种材料不受光线的影响。它可以在没有光源的情况下显示。设置颜色后，每个表面都是相同的颜色。
网格法材料（meshnormalmaterial）
这种材料不受光照的影响。它可以在没有任何光源的情况下显示，每个方向的颜色是不同的，但同一方向的颜色是相同的。

这种材料一般用于调试。
朗博（meshlambertmaterial）网格材料
材料会受到光和不会没有光源创造朦胧没磨损表面上显示。
网格Phong材质（meshphongmaterial）
该材料将受到光的影响，不会显示没有光源，创造明亮的物体。
在这种情况下，网格的Phong材料为例。
VaR材料=新three.meshphongmaterial（{
颜色：黄 将颜色设置为黄色
}）；
在创建了形状和材质之后，就可以创建对象了。
创建对象
var =新的三。网格（几何，材料）；
7，渲染画布
通过这些步骤，我们的渲染器（Renderer），场景（场景），相机（相机），光源（灯）和对象（立方体）。此时，我们需要在场景中添加灯光和对象。
Scene.add（光）；
Scene.add（立方体）；
然后使用渲染器渲染场景和相机。

Renderer.render（场景，相机）；
效果如下：
四、结束语
在上面，只是写在阅读Three js提供的基本功能，并有许多先进的功能，需要探索。我希望你能看完这篇文章有一个初步的认识和阅读Three js，可以使用阅读Three js绘制基本三维图形。

你可以去阅读Three js官方网站的例子。有一些优秀的和典型的例子，还有一些可以下载的代码。你可以做一些研究和探索。

下面是几个值得欣赏的好例子。

总结

以上就是本文的全部内容。我希望这篇文章的内容能帮助你学习或工作。如果有任何疑问，您可以留言，谢谢您的支持。