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;
}
}