Transform
是 Entity
自带的基础组件,开发者可以通过它管理 Entity
在局部空间与世界空间中的位置、旋转和缩放。
结合 Galacean 的 坐标系统 会有更深入地了解。
更改选中实体的可视化变换组件,直接使用鼠标操纵辅助图标轴。
图标 | 操作 | 快捷键 |
---|---|---|
切换到 Gizmo 移动模式 | W |
点击辅助轴,可在单个方向内拖动选中实体。点击辅助平面,可在单个平面内拖动选中实体。
图标 | 操作 | 快捷键 |
---|---|---|
切换到 Gizmo 选择模式 | E |
点击并拖动以更改选中实体的旋转。 红色代表绕 X 轴进行旋转,绿色代表绕 y 轴进行旋转,蓝色代表绕 z 轴进行旋转。
图标 | 操作 | 快捷键 |
---|---|---|
切换到 Gizmo 缩放模式 | R |
点击中心立方体,在所有轴上均匀的缩放选中实体。点击辅助轴,在单个方向缩放选中实体。
通过 检查器面板 可以为节点设置更精确的位置、旋转和缩放信息。
// 创建节点
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 | 世界矩阵 |
worldForward | forward 向量(世界空间中的单位矩阵) |
worldRight | right 向量(世界空间中的单位矩阵) |
worldUp | up 向量(世界空间中的单位矩阵) |
方法名称 | 方法释义 |
---|---|
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;
}
}