mirror of
https://github.com/galacean/engine.git
synced 2026-05-07 06:30:25 +08:00
133 lines
9.0 KiB
Plaintext
133 lines
9.0 KiB
Plaintext
---
|
||
order: 7
|
||
title: 变换
|
||
type: 核心
|
||
label: Core
|
||
---
|
||
|
||
## 基础概念
|
||
|
||
`Transform` 是 `Entity` 自带的基础组件，开发者可以通过它管理 `Entity` 在**局部空间**与**世界空间**中的位置、旋转和缩放。
|
||
|
||
<Callout type="info">
|
||
结合 Galacean 的 **[坐标系统](/docs/core/space)** 会有更深入地了解。
|
||
</Callout>
|
||
|
||
|
||
## 编辑器使用
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*vU40Rb-2s5QAAAAAAAAAAAAADtKFAQ/original" alt="merge" style={{zoom: "50%"}} />
|
||
|
||
更改选中实体的可视化变换组件，直接使用鼠标操纵辅助图标轴。
|
||
|
||
<h3 id = '1'> 移动 </h3>
|
||
|
||
| 图标 | 操作 | 快捷键 |
|
||
| :-------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | :----- |
|
||
| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*s6H2RIawrzgAAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `切换到 Gizmo 移动模式` | W |
|
||
|
||
点击辅助轴，可在单个方向内拖动选中实体。点击辅助平面，可在单个平面内拖动选中实体。
|
||
|
||
<h3 id = '2'> 旋转 </h3>
|
||
|
||
| 图标 | 操作 | 快捷键 |
|
||
| :-------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | :----- |
|
||
| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*lwdcRK3MAUIAAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `切换到 Gizmo 选择模式` | E |
|
||
|
||
点击并拖动以更改选中实体的旋转。
|
||
红色代表绕 X 轴进行旋转，绿色代表绕 y 轴进行旋转，蓝色代表绕 z 轴进行旋转。
|
||
|
||
<h3 id = '3'> 缩放 </h3>
|
||
|
||
| 图标 | 操作 | 快捷键 |
|
||
| :-------------------------------------------------------------------------------------------------------------------------------- | :---------------------- | :----- |
|
||
| <img src="https://mdn.alipayobjects.com/huamei_qbugvr/afts/img/A*r7RiRpAiJm0AAAAAAAAAAAAADtKFAQ/original" width="24" height="24" /> | `切换到 Gizmo 缩放模式` | R |
|
||
|
||
点击中心立方体，在所有轴上均匀的缩放选中实体。点击辅助轴，在单个方向缩放选中实体。
|
||
|
||
通过 **[检查器面板](/docs/interface/inspector)** 可以为节点设置更精确的位置、旋转和缩放信息。
|
||
|
||
<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Y0qPTptpIBoAAAAAAAAAAAAADhuCAQ/original" alt="image.png" />
|
||
|
||
## 脚本使用
|
||
|
||
```typescript
|
||
// 创建节点
|
||
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](/apis/core/#Transform-position) | 局部位移 |
|
||
| [rotation](/apis/core/#Transform-rotation) | 局部旋转 - 欧拉角 |
|
||
| [rotationQuaternion](/apis/core/#Transform-rotationquaternion) | 局部旋转 - 四元数 |
|
||
| [scale](/apis/core/#Transform-scale) | 局部缩放 |
|
||
| [worldPosition](/apis/core/#Transform-worldPosition) | 世界位移 |
|
||
| [worldRotation](/apis/core/#Transform-worldRotation) | 世界旋转 - 欧拉角 |
|
||
| [worldRotationQuaternion](/apis/core/#Transform-worldRotationQuaternion) | 世界旋转 - 四元数 |
|
||
| [lossyWorldScale](/apis/core/#Transform-lossyWorldScale) | 世界有损缩放 - 当父节点有缩放，子节点有旋转时，缩放会倾斜，无法使用 Vector3 正确表示,必须使用 Matrix3x3 矩阵才能正确表示 |
|
||
| [localMatrix](/apis/core/#Transform-localMatrix) | 局部矩阵 |
|
||
| [worldMatrix](/apis/core/#Transform-worldMatrix) | 世界矩阵 |
|
||
| [worldForward](/apis/core/#Transform-worldMatrix) | forward 向量（世界空间中的单位矩阵） |
|
||
| [worldRight](/apis/core/#Transform-worldMatrix) | right 向量（世界空间中的单位矩阵） |
|
||
| [worldUp](/apis/core/#Transform-worldMatrix) | up 向量（世界空间中的单位矩阵） |
|
||
|
||
## 组件方法
|
||
|
||
| 方法名称 | 方法释义 |
|
||
| ----------------------------------------------------------------------- | -------------------------------------- |
|
||
| [getWorldUp](/apis/core/#Transform-getWorldUp) | 获取世界矩阵上向量 |
|
||
| [getWorldRight](/apis/core/#Transform-getWorldRight) | 获取世界矩阵右向量 |
|
||
| [getWorldForward](/apis/core/#Transform-getWorldForward) | 获取世界矩阵前向量 |
|
||
| [lookAt](/apis/core/#Transform-lookAt) | 旋转并且保证世界前向量指向目标世界位置 |
|
||
| [registerWorldChangeFlag](/apis/core/#Transform-registerWorldChangeFlag) | 注册世界变换改变标记 |
|
||
| [rotate](/apis/core/#Transform-rotate) | 根据指定欧拉角旋转 |
|
||
| [rotateByAxis](/apis/core/#Transform-rotateByAxis) | 根据指定角度绕着指定轴旋转 |
|
||
| [translate](/apis/core/#Transform-translate) | 根据指定的方向和距离进行位移 |
|
||
|
||
### `registerWorldChangeFlag` 的作用
|
||
|
||
`transform` 组件内部用脏标记作了大量计算优化。由于 `transform` 的 `worldMatrix` 属性也用脏标记进行了优化，若组件外部需要关注当前 `transform` 的 `worldMatrix` 是否发生了变化，需要获取到其脏标记的状态。 `transform` 组件提供了 `registerWorldChangeFlag` 方法：这个方法会返回一个更新标记，当前 `transform` 的 `worldMatrix` 被修改时会触发标记的更改。具体用法可以参考相机组件：
|
||
|
||
```typescript
|
||
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;
|
||
}
|
||
}
|
||
```
|