ThreeJS:Mesh网格与三维变换

Mesh网格

        ThreeJS中，Mesh表示基于以三角形为多边形网格(polygon mesh)的物体的类，同时也作为其它类的基类。

        通过Mesh网格，我们可以组合Geometry几何体与Material材质属性，在3D世界中，定义一个物体。例如：之前我们创建的立方体物体，

//TODO:创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
//TODO:创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
//TODO:创建网格
const mesh = new THREE.Mesh(geometry, material);

        创建之后，只需要将其add添加到scene场景中即可，

//TODO:将网格添加到场景中
scene.add(mesh);

Mesh:物体位移

Vector3三维向量

        Mesh网格提供了position局部位置属性，通过修改该属性值，可以定义物体的位移。

        position局部位置属性是Vector3类型，表示三维向量，对应于物体的XYZ三个分量。ThreeJS提供了一系列方法，可以用于实现三维向量与标量的运算、三维向量之间的运算。

        通过set方法，可以修改position（Vector3类型）局部坐标的分量值，

        例如，我们将position进行修改，可以看到物体的位移效果，

//TODO:修改物体的position局部坐标属性
mesh.position.set(1,1,2);

 Mesh:物体层级关系

        Mesh网格所表达的空间实体，相互之间是可以具备层级关系的，但是，一个对象仅能有一个父级。

        例如：我们为上面定义的立方体添加一个子元素cube1，

//TODO:为mesh物体添加子元素
const material1 = new THREE.MeshBasicMaterial({color:0xffff00});
const cube1 = new THREE.Mesh(geometry,material1);
//TODO:添加到mesh中
mesh.add(cube1);

        此时，仅仅能够看到新添加的cube1，是因为旧的mesh被新的cube1遮挡住了，两者的位置显然是相同的。

Mesh:父子物体位移关系

        我们尝试修改子物体cube1的局部位置坐标，并查看修改之后的位置关系。

//TODO:为mesh物体添加子元素
const material1 = new THREE.MeshBasicMaterial({color:0xffff00});
const cube1 = new THREE.Mesh(geometry,material1);
//TODO:添加到mesh中
mesh.add(cube1);

cube1.position.set(1,0,0,);

        可以看到：子物体默认将父物体的位置作为坐标原点，然后进行位移操作；而父元素的局部坐标默认就和世界坐标相一致。

Mesh:物体缩放

        Mesh网格提供了scale局部缩放属性，通过修改该属性，可以实现物体的缩放操作。

        此时：Vector3的X、Y、Z分量，分别表示在X轴、Y轴、Z轴方向上的缩放比例值。

        例如：我们将上面的mesh放大2倍，可以看到：将父物体mesh放大2倍，子物体cube1默认也被放大2倍，

//mesh放大2倍
mesh.scale.set(2,2,2);

        接着，我们将子物体cube1放大0.5倍，

//cube1放大0.5倍
cube1.scale.set(0.5,0.5,0.5);

        可以看到，子物体cube1被缩小至原来的1/2，但是父物体mesh没有改变。

Mesh:物体旋转

        Mesh网格提供了rotation局部旋转属性，通过修改该属性，可以实现物体的旋转操作。

        物体旋转是以弧度制为基准的，

欧拉角Euler

        欧拉角Euler，描述一个旋转变换，通过指定轴顺序和各个轴向上的制定旋转角度来旋转一个物体。

使用欧拉角旋转物体

        例如：我们现在将父物体mesh绕Y轴旋转45度，

//mesh绕Y轴旋转45度
mesh.rotation.x = Math.PI /4 ;

        可以看到：父物体mesh和子物体cube1都被旋转了，

        接着，我们将子物体cube1绕Y轴旋转-45度，

mesh绕Y轴旋转-45度
cube1.rotation.x = -Math.PI / 4;

        可以看到，仅仅是子物体cube1被旋转了，

        因此，可以总结：具备层级关系的父物体mesh和子物体cube1，子物体cube1的平移、旋转、缩放都是相对于父物体而言的，即：子物体cube1将父物体的位置视为局部坐标系原点；而父物体的平移、旋转、缩放会直接作用在子物体上。