三 射流研究…学习之网格

前言

小编之前发布过关于几何形状和材质，相信大家看过学习之后，我们就能使用他们来创建物体了。最常用的一种物体就是网格（网格),网格是由顶点、边、面等组成的物体；其他物体包括线段（线)、骨骼（骨)、粒子系统（粒子系统)等。创建物体需要指定几何形状和材质，其中，几何形状决定了物体的顶点位置等信息，材质决定了物体的颜色、纹理等信息。

1.创建网格

在前几篇中，我们学习了如何创建几何形状与材质，而网格的创建非常简单，只要把几何形状与材质传入其构造函数。最常用的物体是网格（网格),它代表包含点、线、面的几何体，其构造函数是：

网格（几何、材料)下面，让我们通过一个具体的例子了解如何创建网格：

可变材料=新的三.MeshLambertMaterial({ color :0x ffff 00 })；变化几何=新三。立方几何(1,2,3);var mesh=new THREE .网格（几何、材料);scene.add(网格);如果材料和几何学之后不会复用的话，也可以合在一起写为：

var mesh=new THREE .网状（新三。立方体几何(1,2,3),新的三MeshLambertMaterial({ color :0x ffff 00 })；scene.add(网格);添加光照后，得到的效果为：

如果不指定材料，则每次会随机分配一种三维线框模型为真实的的材质，每次刷新页面后的颜色是不同的，一种可能的效果是：

源码：

！DOCTYPE html html head meta charset=' UTF-8 '标题3。射流研究…测试9.1/title/head body on load=' init()' canvas id=' mainCanvas ' width=' 400 px ' height=' 300 px '/canvas/body script type=' text/JavaScript ' src=' http : js/THREE。量滴js '/script type=' text/JavaScript '函数init(){ var renderer=new THREE .WebGLRenderer({ canvas :文档。getelementbyid(' mainCanvas ')})；渲染器。SetClearColor(0x 000000)；定义变量场景=新三。场景();//相机var相机=新三.正投影摄像机(-2.5,2.5,1.875,-1.875,0.1,100);camera.position.set(5，5，20)；相机。看（新的三Vector3(0，0，0))；scene.add(摄像机);可变材料=新的三.MeshLambertMaterial({ color :0x ffff 00 })；//var material=new THREE .mesbasicmaterial({//color :0x ffff 00，//线框： true//})；变化几何=新三。立方几何(1,2,3);var mesh=new THREE .网格（几何、材料);scene.add(网格);var light=new THREE .DirectionalLight(0x ffffff)；light.position.set(20，10，5)；场景添加（光);//渲染渲染。渲染(场景、摄像机);} /script/html2 .修改属性

2.1 修改材质

除了在构造函数中指定材质，在网格被创建后，也能对材质进行修改：

可变材料=新的三.MeshLambertMaterial({ color :0x ffff 00 })；变化几何=新三。立方几何(1,2,3);var mesh=new THREE .网格（几何、材料);scene.add(网格);网状材料=新的三.MeshLambertMaterial({ color :0x ff 0000 })；最终显示的颜色是红色：

源码：

！DOCTYPE html html head meta charset=' UTF-8 '标题3。射流研究…测试9.2/title/head body on load=' init()' canvas id=' mainCanvas ' width=' 400 px ' height=' 300 px '/canvas/body script type=' text/JavaScript ' src=' http : js/THREE。量滴js '/script type=' text/JavaScript '函数init(){ var renderer=new THREE .WebGLRenderer({ canvas :文档。getelementbyid(' mainCanvas ')})；渲染器。SetClearColor(0x 000000)；定义变量场景=新三。场景();//相机var相机=新三.正投影摄像机(-2.5,2.5,1.875,-1.875,0.1,100);camera.position.set(5，5，20)；相机。看（新的三Vector3(0，0，0))；scene.add(摄像机);可变材料=新的三.MeshLambertMaterial({ color :0x ffff 00 })；变化几何=新三。立方几何(1,2,3);var mesh=new THREE .网格（几何、材料);scene.add(网格);网状材料=新的三.MeshLambertMaterial({ color :0x ff 0000 })；var light=new THREE .DirectionalLight(0x ffffff)；light.position.set(20，10，5)；场景添加（光);//渲染渲染。渲染(场景、摄像机);} /script/html2.2位置、缩放、旋转

位置、缩放、旋转是物体三个常用属性。由于三个。网状物基础自三个Object3D，因此包含比例、旋转、位置三个属性。它们都是三个矢量3 .实例，因此修改其值的方法是相同的，这里以位置为例。

三个矢量3 .有x、y、z三个属性，如果只设置其中一个属性，则可以用以下方法：

网状。位置。z=1；如果需要同时设置多个属性，可以使用以下两种方法：

mesh.position.set(1.5，-0.5，0)；或者：

mesh.position=new THREE .Vector3(1.5，-0.5，0)；缩放对应的属性是规模，旋转对应的属性是旋转，具体方法与上例相同，分别表示沿x、y、z三轴缩放或旋转。

源码：

！DOCTYPE html html head meta charset=' UTF-8 '标题3。射流研究…测试9.3/title/head body on load=' init()' canvas id=' mainCanvas ' width=' 400 px ' height=' 300 px '/canvas/body script type=' text/JavaScript ' src=' http : js/THREE。量滴js '/script type=' text/JavaScript '函数init(){ var renderer=new THREE .WebGLRenderer({ canvas :文档。getelementbyid(' mainCanvas ')})；渲染器。SetClearColor(0x 000000)；定义变量场景=新三。场景();//相机var相机=新三.正投影摄像机(-2.5,2.5,1.875,-1.875,0.1,100);camera.position.set(5，5，20)；相机。看（新的三Vector3(0，0，0))；scene.add(摄像机);可变材料=新的三.MeshLambertMaterial({ color :0x ffff 00 })；变化几何=新三。立方几何(1,2,3);var mesh=new THREE .网格（几何、材料);scene.add(网格);mesh.position.set(1.5，-0.5，0)；mesh.position=new THREE .Vector3(1.5，-0.5，0)；网状。位置。z=1；var light=new THREE .DirectionalLight(0x ffffff)；light.position.set(20，10，5)；场景添加（光);绘图轴（场景);//渲染渲染。渲染(场景、摄像机);}函数drawAxes(场景){ //x轴var xGeo=new THREE .几何();xGeo。顶点。推送(新三Vector3(0，0，0))；xGeo。顶点。推送(新三。向量3(1,0,0));var xMat=new THREE .LineBasicMaterial({ color :0x ff 0000 })；var xAxis=new THREE .线路(xGeo、xMat)；场景。add(Xaxis)；//y轴var yGeo=new THREE .几何();yGeo。顶点。推送(新的三.Vector3(0，0，0))；yGeo。顶点。推送(新的三.Vector3(0，1，0))；var yMat=new THREE .LineBasicMaterial({ color :0x 00 ff00 })；var yAxis=new THREE .线路(yGeo、Ymat)；场景添加(雅西)；//z轴var zGeo=new THREE .几何();zGeo。顶点。推送(新三Vector3(0，0，0))；zGeo。顶点。推送(新三。向量3(0,0,1));var zMat=new THREE .LineBasicMaterial({ color :0x 00 ccff })；var zAxis=new THREE .线路(zGeo、Zmat)；场景。添加(Zaxis)；}/脚本/html本文的内容到这就结束了，文章通过详细实例及图片介绍了三。射流研究…中的网格，希望本文对大家学习三。射流研究…有所帮助。