ThreeJs父子元素与物体的位移、旋转或缩放

在Three.js中，可以使用Object3D类的实例来控制3D物体的位移、旋转和缩放。这些变换可以通过直接设置对象的属性来实现，也可以通过应用变换矩阵来动态改变物体的状态。

1. 位移（Position）

位移是指移动物体从一个位置到另一个位置。在Three.js中，可以通过设置Object3D的position属性来实现位移。position属性是一个THREE.Vector3实例，可以通过设置其x、y和z分量来移动物体。例如，要将物体沿X轴向右移动3个单位，可以使用以下代码：

object.position.x += 3;

也可以使用set方法来一次性设置所有三个分量：

object.position.set(object.position.x, object.position.y, object.position.z + 3);

2. 旋转（Rotation）

旋转是指围绕一个轴线旋转物体。在Three.js中，Object3D的rotation属性是一个THREE.Euler实例，它使用欧拉角来表示旋转。可以通过设置rotation属性的x、y和z分量来绕相应的轴旋转物体。例如，要使物体绕X轴旋转45度，可以使用以下代码：

object.rotation.x = Math.PI / 4;

Euler类还提供了set方法，允许一次性设置所有旋转分量：

object.rotation.set(Math.PI / 4, 0, 0);

3. 缩放（Scale）

缩放是指改变物体在各个维度上的大小。Object3D的scale属性是一个THREE.Vector3实例，可以通过设置其x、y和z分量来改变物体的尺寸。例如，要将物体在所有维度上缩小一半，可以使用以下代码：

object.scale.set(0.5, 0.5, 0.5);

同样也可以单独设置某个轴的缩放因子：

object.scale.x = 0.5;

在进行旋转和缩放操作时，需要注意旋转和缩放的顺序可能会影响最终的结果，尤其是在非均匀缩放（即在不同轴上使用不同的缩放因子）时。

4. 父子关系（Hierarchy）

在Three.js中，可以创建具有父子关系的物体。子物体的位置、旋转和缩放都是相对于其父物体的。这意味着，当移动、旋转或缩放父物体时，所有添加到该父物体中的子物体也会相应地移动、旋转或缩放。要将一个物体添加为另一个物体的子物体，可以使用add方法。例如：

parent.add(child);

子物体的位置和旋转将相对于父物体的局部坐标系统进行计算。如果希望子物体相对于世界坐标系统进行变换，需要相应地调整父物体的变换或直接在世界坐标系统中对子物体应用变换。