携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情 >

改变模型旋转缩放位置信息

位置

如需改变mesh在场景中的视觉位置，可以通过两种方式

改变相机的位置，简易而言就是mesh的位置并没有发生变化，但是由于camera发生了改变，我们可见的模型也就发生了变化，拍照时模特不动，摄像师在找角度，拍出的照片效果不同；（在1中有展示如何调整摄像头的位置);
改变mesh本身的位置，该位置发生变化的实际效果也会受相机位置的影响；

通过对象属性改变模型的位置

注：mesh 为已创建好的new THREE.Mesh()对象

// 改变单个方向的位置信息
mesh.position.x = 0.1;
mesh.position.y = 0.2;
mesh.position.z = 0.3;

// 同时改变(x,y,z)
mesh.position.set(0.1,0.2,0.3)

缩放

// 分别对应相对于x,y,z方向的缩放
mesh.scale.set(0.5,0.5,0.5)

旋转

// exemplify1: 欧拉角实现旋转
// 设置沿自身的Y轴旋转180°(设置的值为弧度 Math.PI = 180°)
mesh.rotation.y = Math.PI / 2
// 指定旋转顺序
mesh.rotation.reorder('YXZ')
// exemplify2: 四元数实现旋转
 mesh.quaternion.copy( new THREE.Quaternion(0,1,0,0))
// 无论是欧拉角还是四元数实现旋转,他们都是相互对应更新的

旋转中有个万向锁(Gimbal Lock)的概念,出现于欧拉角,我还对概念有些混淆和疑问,等以后更明白了补充说明。

Vector3 扩展与实际使用场景

模型的位置,缩放信息以Vector3（3维向量）存储，threejs在数学库中还有更具体的更详细更全面的说明 Vector3说明链接

distanceTo 计算场原点/相机/Vector3至某一模型的距离

// distanceTo 计算该向量到所传入的Vector3间的距离
// 1. 模型与原点间的距离   场景原点为new THREE.Vector3(0,0,0)
mesh.position.distanceTo(new THREE.Vector3(0,0,0))
// Vector3(x,y,z).length() 计算从(0,0,0)至Vector3(x,y,z)的距离
mesh.position.length()
// 2.模型与相机之间的距离
mesh.position.distanceTo(camera.position)
// 3.两模型之间的距离
mesh.position.distanceTo(otherMesh.position)

normalize 转换向量为单位向量

// 方向设置与原向量相通,但其距离远点的距离为1
 mesh.position.normalize()
 mesh.position.length()  == 1

Axes Helper

展示坐标轴,当找不准xyz所对应的线条时,可以跟我一样用rgb颜色去记得,rgb对应xyz,red-x,green-y,blue-z.

// Axes Helper
const axesHelper = new THREE.AxesHelper();
scene.add(axesHelper)
// 如果添加进场景中只能看见两条轴时检查你的相机位置,是否由于你的相机位置只修改了x,y,z中的某一个值,导致你与该面完全平行,使得坐标轴不可见
// 默认AxesHelper的size为1,1,1;因为最初我们创建的mesh正方体长度也为1,所以他们俩大小一只,可通过创建时传入值修改AxesHelper的size  new THREE.AxesHelper(5,5,5)
// 注:这里的1没有单位,就是在该场景中的单位1

Three JS改变模型属性----(2)