核心

变换

基础概念

Transform 是 Entity 自带的基础组件,开发者可以通过它管理 Entity 在局部空间与世界空间中的位置、旋转和缩放。

结合 Galacean 的 坐标系统 会有更深入地了解。

编辑器使用

merge

更改选中实体的可视化变换组件,直接使用鼠标操纵辅助图标轴。

移动

图标操作快捷键
切换到 Gizmo 移动模式W

点击辅助轴,可在单个方向内拖动选中实体。点击辅助平面,可在单个平面内拖动选中实体。

旋转

图标操作快捷键
切换到 Gizmo 选择模式E

点击并拖动以更改选中实体的旋转。 红色代表绕 X 轴进行旋转,绿色代表绕 y 轴进行旋转,蓝色代表绕 z 轴进行旋转。

缩放

图标操作快捷键
切换到 Gizmo 缩放模式R

点击中心立方体,在所有轴上均匀的缩放选中实体。点击辅助轴,在单个方向缩放选中实体。

通过 检查器面板 可以为节点设置更精确的位置、旋转和缩放信息。

image.png

脚本使用

// 创建节点
const scene = engine.sceneManager.activeScene;
const root = scene.createRootEntity("root");
const cubeEntity = root.createChild("cube");
 
// entity 在创建后会默认自带变换组件
// 通过变换组件能够对实体进行几何变换
 
// 修改节点位移,旋转,缩放
transform.position = new Vector3();
// 也可以 transform.setPosition(0, 0, 0);
 
transform.rotation = new Vector3(90, 0, 0);
// 也可以 transform.setRotation(90, 0, 0);
 
// 也可以通过实体的属性获取到 transform 组件
cubeEntity.transform.scale = new Vector3(2, 1, 1);
// 也可以 cubeEntity.transform.setScale(2, 1, 1);
 
// 局部位移 cube 实体
cubeEntity.transform.translate(new Vector3(10, 0, 0), true);
 
// 局部旋转 cube 实体
cubeEntity.transform.rotate(new Vector3(45, 0, 0), true);

组件属性

属性名称属性释义
position局部位移
rotation局部旋转 - 欧拉角
rotationQuaternion局部旋转 - 四元数
scale局部缩放
worldPosition世界位移
worldRotation世界旋转 - 欧拉角
worldRotationQuaternion世界旋转 - 四元数
lossyWorldScale世界有损缩放 - 当父节点有缩放,子节点有旋转时,缩放会倾斜,无法使用 Vector3 正确表示,必须使用 Matrix3x3 矩阵才能正确表示
localMatrix局部矩阵
worldMatrix世界矩阵
worldForwardforward 向量(世界空间中的单位矩阵)
worldRightright 向量(世界空间中的单位矩阵)
worldUpup 向量(世界空间中的单位矩阵)

组件方法

方法名称方法释义
getWorldUp获取世界矩阵上向量
getWorldRight获取世界矩阵右向量
getWorldForward获取世界矩阵前向量
lookAt旋转并且保证世界前向量指向目标世界位置
registerWorldChangeFlag注册世界变换改变标记
rotate根据指定欧拉角旋转
rotateByAxis根据指定角度绕着指定轴旋转
translate根据指定的方向和距离进行位移

registerWorldChangeFlag 的作用

transform 组件内部用脏标记作了大量计算优化。由于 transform 的 worldMatrix 属性也用脏标记进行了优化,若组件外部需要关注当前 transform 的 worldMatrix 是否发生了变化,需要获取到其脏标记的状态。 transform 组件提供了 registerWorldChangeFlag 方法:这个方法会返回一个更新标记,当前 transform 的 worldMatrix 被修改时会触发标记的更改。具体用法可以参考相机组件:

class Camera {
  onAwake() {
    this._transform = this.entity.transform;
    // 注册更新标记
    this._isViewMatrixDirty = this._transform.registerWorldChangeFlag();
  }
  get viewMatrix() {
    // 当标记更新时,根据 worldMatrix 得到viewMatrix~
    if (this._isViewMatrixDirty.flag) {
      this._isViewMatrixDirty.flag = false;
      Matrix.invert(this._transform.worldMatrix, this._viewMatrix);
    }
    return this._viewMatrix;
  }
}

这篇文档对您有帮助吗?