Three.js第三课-父子元素&缩放旋转

父子元素

设置元素位置

• 单独轴坐标位置 good.position.x=2
• 整体轴坐标位置 good.position.set(2,0,0)

局部坐标

• 理解：当某个物体存在父元素时，那么它的坐标就是局部坐标
• 参照：其坐标位置会相对于其父元素进行，将其父元素作为原点
• 表现：当平移父元素时，子元素的位置也会跟着动
• 代码：

// 定义形状
// BoxGeometry(几何体)
const geometry = new Three.BoxGeometry(1, 1, 1)
// 定义父元素
const parentgeometry=new Three.BoxGeometry(1,2,1)
const parentmaterial=new Three.MeshBasicMaterial({color:"skyblue"})
// 定义材质
const material = new Three.MeshBasicMaterial({ color: "pink" })
// 创建物体
const good = new Three.Mesh(geometry, material)
const parentgood=new Three.Mesh(parentgeometry,parentmaterial)
// 形成父子关系
parentgood.add(good);
parentgood.position.set(-2,0,0)
// 移动物体
good.position.set(2,0,0)

// 将物体添加到场景中
scene.add(parentgood)

• 效果：

世界坐标

• 理解：当某个物体不存在父元素时，那么它的坐标就是世界坐标
• 参照：其坐标位置相对于世界进行，将世界坐标系作为原点
• 代码：

// 定义形状
// BoxGeometry(几何体)
const geometry = new Three.BoxGeometry(1, 1, 1)
// 定义材质
const material = new Three.MeshBasicMaterial({ color: "pink" })
// 创建物体
const good = new Three.Mesh(geometry, material)
// 移动物体
good.position.x=2

// 将物体添加到场景中
scene.add(good);

• 效果：

根据上面两个例子，我们可以更加深入的理解局部坐标与全局坐标了

P1父元素设置位置坐标为（-2,0,0），子元素设置坐标为（2,0,0） 但是实际上子元素的位置却在（0,0,0），那是因为子元素的（2,0,0）是相对于父元素当前所处的位置的（将父元素当作（0,0,0））

缩放scale

• 坐标系：缩放也是相对于局部坐标系的，因此父元素放大时，子元素也会放大
• API: scalegood.scale.set(x,y,z)
• 代码：

将整个good都放大两倍
good.scale.set(2,2,2)

• 效果

旋转 rotation

• 坐标系：旋转也是相对于局部坐标系的，因此父元素旋转时，子元素也会旋转
• 旋转：欧拉角Euler
• API：Euler（x,y,z,order） order为旋转顺序，默认为'XYZ'
• 代码：

// 绕x轴方向旋转45°
good.rotation.set(Math.PI/4,0,0)

• 效果