对阅读Threejs学习网格
前言小编辑以前已经发表过关于几何学和材料的文章，在你看过这项研究之后，我们可以用它们来创建物体。最常用的对象是网格（网格）。网格由顶点、边和面组成。其他对象包括线段（线）、骨（骨），和粒子系统（体系），创建对象时，我们需要指定的几何形状和材料和几何物体的顶点位置的确定。材料决定物体的颜色和质地。
1。创建一个网格
在前几篇文章中，我们学习了如何创建几何和材料，网格的创建非常简单。只需将几何和材料引入构造函数中，最常用的对象是网格（网格），它代表包含点、线和曲面的几何体，其构造函数是：
网格（几何，材料）
下面，我们来看看如何通过一个具体的例子来创建一个网格：
VaR材料=新three.meshlambertmaterial（{
颜色：0xffff00
}）；
VAR几何=新three.cubegeometry（1, 2, 3）；
var网格=新三。网格（几何，材料）；
Scene.add（目）；
如果材料和几何形状在这之后不能再使用，它们也可以一起写成：
无功网=新三。网（新three.cubegeometry（1, 2, 3），
新的three.meshlambertmaterial（{
颜色：0xffff00
}）
）；
Scene.add（目）；
添加光后，结果如下：
如果没有指定材料，线框图的真实材料将被随机分配。刷新后每个页面的颜色不同。一个可能的效果是：
源代码：
3.js测试9.1
函数init（）{
VaR渲染=新three.webglrenderer（{
帆布：document.getelementbyid（'maincanvas）
}）；
Renderer.setClearColor（0x000000）；
var场景=新三。场景（）；
相机
VaR相机=新three.orthographiccamera（2.5，2.5，1.875，-1.875，0.1，100）；
（5, 5, 20）camera.position.set；
Camera.lookAt（新three.vector3（0, 0, 0））；
Scene.add（相机）；
VaR材料=新three.meshlambertmaterial（{
颜色：0xffff00
}）；
新材料（three.meshbasicmaterial / / var = {
颜色： / / 0xffff00，
线框： / /真的
}；
VAR几何=新three.cubegeometry（1, 2, 3）；
var网格=新三。网格（几何，材料）；
Scene.add（目）；
VAR光=新three.directionallight（0xffffff）；
（20, 10, 5）light.position.set；
Scene.add（光）；
渲染
Renderer.render（场景，相机）；
}
2。修改属性
2.1修改材料
除了指定构造函数中的材质外，还可以在创建网格之后修改该材质：
VaR材料=新three.meshlambertmaterial（{
颜色：0xffff00
}）；
VAR几何=新three.cubegeometry（1, 2, 3）；
var网格=新三。网格（几何，材料）；
Scene.add（目）；
mesh.material =新three.meshlambertmaterial（{
颜色：0xFF0000
}）；
最后的颜色是红色：
源代码：
3.js测试9.2
函数init（）{
VaR渲染=新three.webglrenderer（{
帆布：document.getelementbyid（'maincanvas）
}）；
Renderer.setClearColor（0x000000）；
var场景=新三。场景（）；
相机
VaR相机=新three.orthographiccamera（2.5，2.5，1.875，-1.875，0.1，100）；
（5, 5, 20）camera.position.set；
Camera.lookAt（新three.vector3（0, 0, 0））；
Scene.add（相机）；
VaR材料=新three.meshlambertmaterial（{
颜色：0xffff00
}）；
VAR几何=新three.cubegeometry（1, 2, 3）；
var网格=新三。网格（几何，材料）；
Scene.add（目）；
mesh.material =新three.meshlambertmaterial（{
颜色：0xFF0000
}）；
VAR光=新three.directionallight（0xffffff）；
（20, 10, 5）light.position.set；
Scene.add（光）；
渲染
Renderer.render（场景，相机）；
}
2.2位置，缩放，旋转
位置、缩放、旋转的一个对象的三种属性。自三。网格基础是从three.object3d，它包含三个属性表，旋转，和位置。他们都是three.vector3实例，所以修改其值的方式是一样的，位置为例。
THREE.Vector3 has three attributes of X, y, and Z. If only one of the properties is set, the following method can be used:
网格。位置。z = 1；
如果您需要同时设置多个属性，则可以使用以下两种方法：
mesh.position.set（1.5，0.5，0）；
或：
mesh.position =新three.vector3（1.5，0.5，0）；
相应缩放比例属性，旋转属性对应旋转，具体方法和例子分别为x、y、z表示三轴旋转或缩放。
源代码：
3.js测试9.3
函数init（）{
VaR渲染=新three.webglrenderer（{
帆布：document.getelementbyid（'maincanvas）
}）；
Renderer.setClearColor（0x000000）；
var场景=新三。场景（）；
相机
VaR相机=新three.orthographiccamera（2.5，2.5，1.875，-1.875，0.1，100）；
（5, 5, 20）camera.position.set；
Camera.lookAt（新three.vector3（0, 0, 0））；
Scene.add（相机）；
VaR材料=新three.meshlambertmaterial（{
颜色：0xffff00
}）；
VAR几何=新three.cubegeometry（1, 2, 3）；
var网格=新三。网格（几何，材料）；
Scene.add（目）；
mesh.position.set（1.5，0.5，0）；
mesh.position =新three.vector3（1.5，0.5，0）；
网格。位置。z = 1；
VAR光=新three.directionallight（0xffffff）；
（20, 10, 5）light.position.set；
Scene.add（光）；
DrawAxes（现场）；
渲染
Renderer.render（场景，相机）；
}
功能drawaxes（场景）{
x轴
VaR XGEO =新几何（）三；
XGeo.vertices.push（新three.vector3（0, 0, 0））；
XGeo.vertices.push（新three.vector3（1, 0, 0））；
无功xmat =新three.linebasicmaterial（{
颜色：0xFF0000
}）；
var x =三线（XGEO，xmat）；
Scene.add（X轴）；
y轴
无功ygeo =新几何（）三；
YGeo.vertices.push（新three.vector3（0, 0, 0））；
YGeo.vertices.push（新three.vector3（0, 1, 0））；
无功ymat =新three.linebasicmaterial（{
颜色：0x00ff00
}）；
VaR轴=新三线（ygeo，ymat）；
Scene.add（Y轴）；
z轴
无功zgeo =新几何（）三；
ZGeo.vertices.push（新three.vector3（0, 0, 0））；
ZGeo.vertices.push（新three.vector3（0, 0, 1））；
VaR中煤安泰=新three.linebasicmaterial（{
颜色：0x00ccff
}）；
var扎克思=新三线（zgeo，中煤安泰）；
Scene.add（Z轴）；
}
这是本文的结尾。本文介绍了网格在阅读Three js通过详细的实例和图片。我希望这篇文章能帮助你学习阅读Three js。