核心

变换

基础概念

TransformEntity 自带的基础组件,开发者可以通过它管理 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 组件内部用脏标记作了大量计算优化。由于 transformworldMatrix 属性也用脏标记进行了优化,若组件外部需要关注当前 transformworldMatrix 是否发生了变化,需要获取到其脏标记的状态。 transform 组件提供了 registerWorldChangeFlag 方法:这个方法会返回一个更新标记,当前 transformworldMatrix 被修改时会触发标记的更改。具体用法可以参考相机组件:

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;
  }
}
最后更新于 七月 11, 2024

这篇文档对您有帮助吗?