threejs 模型的几何变换(旋转、缩放、平移)_threejs scale

缩放

立方体网格模型x轴方向放大2倍，如果连续执行两次该语句，相等于比原来方法4倍

   mesh.scale.x = 2.0;//x轴方向放大2倍
1

立方体网格模型整体缩小0.5倍，相当于xyz三个方向分别缩小0.5倍

 mesh.scale.set(0.5,0.5,0.5);//缩小为原来0.5倍
1

网格模型Mesh的属性scale返回值是一个Vector3对象，查看three.js官方文档你可以知道Vector3对象具有属性x、y、z对于上面的代码而言xyz表示坐标值，xyz数据类型是float，Vector3对象还具有方法set()，set方法有三个表示xyz坐标的参数。

平移

立方体网格模型沿着x轴正方向平移100，可以多次执行该语句，每次执行都是相对上一次的位置进行平移变换

 mesh.translateX(100);//沿着x轴正方向平移距离100
1

网格模型沿着向量(0,1,0)表示的方向平移100

var axis = new THREE.Vector3(0,1,0);//向量axis
mesh.translateOnAxis(axis,100);//沿着axis轴表示方向平移100
1
2

translateOnAxis(axis, distance)方法相比.translateX、.translateY、.translateZ更通用，可以实现立方体沿着任何方向旋平移，参数axis表示平移方向，使用对象Vector3表示

旋转

立方体网格模型绕立方体的x轴旋转π/4，可以多次执行该语句，每次执行都是相对上一次的角度进行旋转变化

mesh.rotateX(Math.PI/4);//绕x轴旋转π/4
1

网格模型绕(0,1,0)向量表示的轴旋转π/8

var axis = new THREE.Vector3(0,1,0);//向量axis
mesh.rotateOnAxis(axis,Math.PI/8);//绕axis轴旋转π/8
1
2

rotateOnAxis(axis, angle)方法相比.rotateX、.rotateY、.rotateZ更通用，可以实现立方体绕任何轴旋转，参数axis表示旋转轴，使用对象Vector3表示

位置属性position

立方体网格模型位置坐标(80,2,10)

    mesh.position.y = 80;//设置网格模型几何中心y坐标
1

立方体网格模型几何中心y轴坐标值80

mesh.position.set(80,2,10);//设置网格模型几何中心三维坐标
1

position属性和平移方法translateX()一样都是设置距离，方法translateX()设置的相对上次位置进行平移，两次执行该方法，距离会叠加，position属性设置的距离是相对坐标系原点位置， 两次执行position属性立方体的会只会更新重新定位，两次的距离参数不是叠加关系，而是替换关系。

角度属性rotation

立方体网格模型位置坐标(60,2,10)

 mesh.position.y = 90;//设置网格模型几何中心y坐标
1

立方体网格模型几何中心y轴坐标值80

mesh.position.set(10,2,30);//设置网格模型几何中心三维坐标
1

rotation属性和旋转方法rotateX()差异类似position属性和平移方法translateX()的差异，一个是相对坐标系设置角度、位置，一个是相对当前的三维模型的状态设置角度、位置参数。 旋转与平移参考的都是坐标系，不过参考的坐标系稍有不同，平移参考的是世界坐标系或者说三维场景对象Scene的坐标系，和相机对象一样，在整个三维场景中的位置， 三维模型的旋转参考的是模型坐标系，也就是对三维模型本身建立的坐标系。