学习 Three.js (2) —— 物体的位移缩放旋转和父子层级关系

上篇介绍了 three.js 的入门操作和基本的代码，这篇来讲述如何操控物体的变化，以及父子层级关系

物体的位移、缩放 & 旋转

在上一篇代码的基础上我们给立方体设置它的属性，先创建一个立方体作为示例

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: "#fff" });

// 创建网格
const cube = new THREE.Mesh(geometry, material);

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

位移

// 设置位移
cube.position.set(3, 0, 0);

// 或者
cube.position.x = 3;

效果如下，立方体向 x 轴正方向位移三个单位

 

缩放

// 设置物体缩放
cube.scale.set(2, 2, 2);

// 或者
cube.scale.x = 2;
cube.scale.y = 2;
cube.scale.z = 2;

效果如下，立方体延 x、y、z 轴方向放大了两倍

旋转

// 设置物体旋转
cube.rotation.set(Math.PI / 4, 0, 0);

// 或者
cube.rotation.x = Math.PI / 4;

效果如下，立方体围绕 x 轴旋转了45°

---

父子层级关系

父子层级关系是指，子物体会相对它的父物体来改变自身的属性；

接下来先在原本的基础上再创建一个立方体，然后将一个立方体添加到另一个立方体中，形成父子关系，更新代码如下：

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建两个材质作为区分，父级物体使用橙色
const material = new THREE.MeshBasicMaterial({ color: "#fff" });
const parentCubeMaterial = new THREE.MeshBasicMaterial({ color: "#ff7700" });

// 创建网格，创建两个立方体
let parentCube = new THREE.Mesh(geometry, parentCubeMaterial);
const cube = new THREE.Mesh(geometry, material);

// 将子立方体添加到父立方体中
parentCube.add(cube);
// 将网格添加到场景中
scene.add(parentCube);

效果如下（注意注释掉刚才的属性设置代码），看似只有一个物体，实际上是两个物体重合在一起，橙色的是父级物体；

接下来我们移动父级物体，发现子物体跟随着父级物体一起移动，这就是相对位置关系，以父级为原点；

parentCube.position.set(-3, 0, 0);

接着我们再移动子物体，发现子物体移动到了世界坐标系的原点，因为子物体是相对父物体向 x 轴正方向位移三个单位，而父物体在 x 轴的 -3，所以子物体最终的位置是在世界坐标系的原点上；

// 设置子物体位置
cube.position.set(3, 0, 0);

相同的，缩放旋转等属性也会有父子层级关系的影响，原理是一样的，剩下的就由你自己去手操一遍啦。

---

这里是Matcha，坚持每天都输出文章&博客&观点，对本文章若有疑惑可以在评论区留言或者私聊我，我每天都会追踪最新消息和即使回复；目前我正在学习 three.js，后续会持续更新相关博客，期待你的点赞和关注。