Three.js 三维模型⼏何体旋转、缩放和平移
Three.js 三维模型⼏何体旋转、缩放和平移
创建场景中的三维模型往往需要设置显⽰⼤⼩、位置、⾓度，three.js提供了⼀系列⽹格模型对象的⼏何变换⽅法，从WebGL的⾓度看，旋转、缩放、平移对应的都是模型变换矩阵，关于矩阵变换内容可以观看本⼈博客发布的原⽣WebGL课程。
⽹格模型对象的旋转、缩放、平移等⽅法或属性可以查three.js⽂档的Object3D对象，该对象是⽹格模型对象、点模型对象、线条模型对象的基类。
缩放
⽴⽅体⽹格模型x轴⽅向放⼤2倍，如果连续执⾏两次该语句，相等于⽐原来⽅法4倍
⽴⽅体⽹格模型整体缩⼩0.5倍，相当于xyz三个⽅向分别缩⼩0.5倍
⽹格模型Mesh的属性scale返回值是⼀个Vector3对象，查看three.js官⽅⽂档你可以知道Vector3对象具有属性x、y、z对于上⾯的代码⽽⾔xyz表⽰坐标值，xyz数据类型是float，Vector3对象还具有⽅法set()，set⽅法有三个表⽰xyz坐标的参数。
平移
⽴⽅体⽹格模型沿着x轴正⽅向平移100，可以多次执⾏该语句，每次执⾏都是相对上⼀次的位置进⾏平移变换
⽹格模型沿着向量(0,1,0)表⽰的⽅向平移100
translateOnAxis(axis, distance)⽅法相⽐.translateX、.translateY、.translateZ更通⽤，可以实现⽴⽅体沿着任何⽅向旋平移，参数axis表⽰平移⽅向，使⽤对象Vector3表⽰
旋转
⽴⽅体⽹格模型绕⽴⽅体的x轴旋转π/4，可以多次执⾏该语句，每次执⾏都是相对上⼀次的⾓度进⾏旋转变化
⽹格模型绕(0,1,0)向量表⽰的轴旋转π/8
rotateOnAxis(axis, angle)⽅法相⽐.rotateX、.rotateY、.rotateZ更通⽤，可以实现⽴⽅体绕任何轴旋转，参数axis表⽰旋转轴，使⽤对象Vector3表⽰
位置属性position
⽴⽅体⽹格模型位置坐标(80,2,10)
⽴⽅体⽹格模型⼏何中⼼y轴坐标值80mesh.scale.x = 2.0;//x 轴⽅向放⼤2倍
1mesh.scale.set(0.5,0.5,0.5);//缩⼩为原来0.5倍
1var axis = new THREE.Vector3(0,1,0);//向量anslateOnAxis(axis,100);//沿着axis 轴表⽰⽅向平移100
1var axis = new THREE.Vector3(0,1,0);//向量ateOnAxis(axis,Math.PI/8);//绕axis 轴旋转π/8
1
2mesh.position.y = 80;//设置⽹格模型⼏何中⼼y 坐标
1
position属性和平移⽅法translateX()⼀样都是设置距离，⽅法translateX()设置的相对上次位置进⾏平移，两次执⾏该⽅法，距离会叠加，position属性设置的距离是相对坐标系原点位置， 两次执⾏position属性⽴⽅体的会只会更新重新定位，两次的距离参数不是叠加关系，⽽是替换关系。
⾓度属性rotation
⽴⽅体⽹格模型位置坐标(80,2,10)
⽴⽅体⽹格模型⼏何中⼼y轴坐标值80
rotation属性和旋转⽅法rotateX()差异类似position属性和平移⽅法translateX()的差异，⼀个是相对坐标系设置⾓度、位置，⼀个是相对当前的三维模型的状态设置⾓度、位置参数。 旋转与平移参考的都是坐标系，不过参考的坐标系稍有不同，平移参考的是世界坐标系或者说三维场景对象Scene的坐标系，和相机对象⼀样，在整个三维场景中的位置， 三维模型的旋转参考的是模型坐标系，也就是对三维模型本⾝建⽴的坐标系。基类Object3D 点模型Points 、线模型Line 、精灵模型sprite 、组对象Group 等threejs模型对象的基类都是Object3D ，这些模型对象的⾓度、位置、缩放属性和旋转、平移、缩放⽅法都可以查看threejs⽂档基类Object3D
⼏何体变换⼏何体Geometry 和⽹格模型Mesh ⼀样也就有旋转缩放平移等⽅法，通过⽹格模型或⼏何
体的⽅法都可以对模型进⾏变换，但是本质是不⼀样的，⽹格模型Mesh 执⾏旋转平移缩放变化，并不会改变⾃⾝绑定⼏何体的顶点坐标，会改变模型对应的模型矩阵ModelMatrix ，⼏何体执⾏旋转缩放平移变换会改变⼏何体本⾝包含的顶点位置、法向量等数据。
如果对上⾯阐述不太理解，建议最好看看本⼈博客发布的threejs课程中第⼆章关于⼏何体顶点的介绍，threejs进阶课程中关于模型矩阵等概念的介绍。
下⾯的程序是通过⼀个⼏何体创建了多个⽹格模型，⽹格模型可以共享⼏何体对象和材质对象都，⼏何体对象本质上是⼀组顶点相关数据，每创建⼀个⽹格模型， 相当于多次利⽤显存中的同⼀组定点相关数据渲染出多个三维模型的效果，⼏何体顶点虽然是同⼀组数据，但是可以在GPU着⾊器中对这组数据进⾏矩阵变换，来呈现出不同的效果。
代码中的⽹格模型mesh1、⽹格模型mesh2都是通过同⼀个⼏何体对象Geometry创建，默认情况下，⼏何体对象的顶点位置决定了⽹格模型在场景中的显⽰位置， 两个⽹格模型执⾏⽅法translateX()进⾏平移变换错开显⽰。⽹格模型的平移变换⽅法translateX()会通过three.js引擎转化为WebGL中CPU顶点着⾊器的矩阵变换程序。
更改上⾯的程序，插⼊下⾯⼀段代码，放⼤其中⼀个⽹格模型，可以看到另外外⼀个⽹格模型的显⽰⼤⼩并不受影响。
mesh.position.set(80,2,10);//设置⽹格模型⼏何中⼼三维坐标1mesh.position.y = 80;//设置⽹格模型⼏何中⼼y 坐标
1mesh.position.set(80,2,10);//设置⽹格模型⼏何中⼼三维坐标
1/** * 创建⽹格模型1、⽹格模型2 */var box=new THREE.BoxGeometry(50,50,50);//创建⼀个⽴⽅体⼏何对象var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材质对象var mesh1=new THREE.Mesh(box,material);//⽹格模型对象1var mesh2=new THREE.Mesh(box,material);//⽹格模型对象anslateX(-50);//沿着x 轴负⽅向平移距离anslateX(50);//沿着x 轴正⽅向平移距离50scene.add(mesh1);//⽹格模型1添加到场景中scene.add(mesh2);//⽹格模型2添加到场景中
1
2
3
4
5
rotate属性6
7
8
9
10
11mesh2.scale.y = 2.0;//y 轴⽅向放⼤2倍
1
⽹格模型对象可以进⾏缩放平移旋转变换，⼏何体对象也拥有相关的⼏何变换⽅法和属性，⼏何体进⾏⼏何变换，本质上更改的是显存中的顶点相关数据， ⽹格模型进⾏⼏何变换，不会更改显存中的顶点数据，顶点数据的变换是在GPU渲染管线的顶点着⾊器处理单元中借助程序逐顶点执⾏矩阵乘法运算。
⼏何体对象执⾏⽅法scale()，尺⼨缩⼩为原来的0.5倍，刷新浏览器你会看到两个⽹格模型代表的⽴⽅
体都缩⼩了，对⽐上⾯的程序可以看出更改⼏何体的参数，与之相关的⽹格模型都会变化。 这很好理解，⽹格模型的⼏何变换更改的是要与顶点数据进⾏乘法运算的模型矩阵，⼏何体对象进⾏变换更累刷新的是显存上的顶点相关数据，每次渲染出⼀个⽹格模型， 都会从⽹格模型构造函数指定的顶点对象获取顶点数据。
⼏何体对象可以进⾏上⾯程序中的缩放变换，⾃然也有平移、缩放变换的相关⽅法，具体使⽤⽅法可以参考three.js⽂档的Geometry对象,⽴⽅体、球体等⼏何体的构造函数返回的结果都是Geometry对象， 这些构造函数返回的对象都会继承Geometry对象的属性和⽅法。var box=new THREE.BoxGeometry(50,50,50);//创建⼀个⽴⽅体⼏何对象box.scale(0.5,0.5,0.5);//⼏何体缩⼩为原来0.5倍
1
2

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。