# 方位编辑工具
方位编辑工具（TransformEditorTool）由 @tx3d/extension 包提供。
import { TransformEditorTool } from '@tx3d/extension';
// 添加方位编辑工具
const tool = engine.toolManager.addTool( TransformEditorTool );
// 激活方位编辑工具
engine.toolManager.activateTool( TransformEditorTool, {
mode : 'translate', // 编辑模式 ，默认translate
space: 'local', // 编辑空间， 默认local
queryMask : Tx3d.QueryMask.All, // 查询实体类型
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
提示
使用activateTool接口激活工具时，建议指定工具的拾取遮罩值，即编辑对象对应的遮罩值。非必选，默认QueryMask.ALL，即所有对象均可被编辑。详见QueryMask。
# 事件
🌏 select：选择编辑实体事件
import { BoundHelper } from '@tx3d/extension';
// 监听选择编辑实体事件
tool.addEventListener( 'select', ( event ) => {
const entities = event.entities;
for ( let i = 0, il = entities.length; i < il; i++ ) {
const entity = entities[ i ];
// 添加外包盒组件
entity.addComponent( BoundHelper, {
color: '#00ff00',
outlineCornerColor: '#00ff00'
} );
}
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
🌏 unselect：取消选择编辑实体事件
import { BoundHelper } from '@tx3d/extension';
// 监听取消选择编辑实体事件
tool.addEventListener( 'unselect', ( event ) => {
const entities = event.entities;
for ( let i = 0, il = entities.length; i < il; i++ ) {
const entity = entities[ i ];
// 移除BoundHelper组件
entity.removeComponent( BoundHelper );
}
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
🌏 complete：编辑完成事件
// 监听编辑完成事件
tool.addEventListener( 'complete', ( event ) => {
const entities = event.entities;
// TODO: 编辑完成回调
} );
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 属性
🌏 mode 编辑模式
// 获取方位编辑工具的编辑模式
const mode = engine.toolManager.activatedTool.mode;
// 设置方位编辑工具的编辑模式
engine.toolManager.activatedTool.mode = 'scale';
1
2
3
4
5
2
3
4
5
🌏 lock 是否锁定编辑对象
// 获取是否锁定编辑对象
const lock = engine.toolManager.activatedTool.lock;
// 设置锁定编辑对象
engine.toolManager.activatedTool.lock = true; // 解锁为false
1
2
3
4
5
2
3
4
5
注意
锁定后无法再次选择编辑实体也无法取消当前选择的编辑实体，除非解锁或冻结工具。
🌏 queryMask 查询遮罩值
import { QueryMask } from '@tx3d/core';
// 设置查询遮罩值（查询模型和Marker）
tool.queryMask = QueryMask.Model | QueryMask.Marker;
// 获取查询遮罩
const queryMask = tool.queryMask;
1
2
3
4
5
6
7
2
3
4
5
6
7
🌏 enableBoxSelect 是否启用框选
// 设置启用框选
tool.enableBoxSelect = true;
// 获取是否启用框选
const enableBoxSelect = tool.enableBoxSelect;
1
2
3
4
5
2
3
4
5
🌏 boxSelectKey 框选辅助按键
// 设置框选辅助按键为'Shift'
tool.boxSelectKey = 'Shift';
// 获取框选辅助按键
const boxSelectKey = tool.boxSelectKey;
1
2
3
4
5
2
3
4
5
提示
框选操作需要辅助按键配合，默认为'Control'键。使用时可以根据实际需求调整辅助按键。
🌏 subSelectKey 子实体选择辅助按键
// 设置子实体选择辅助按键为'Control'
tool.subSelectKey = 'Control';
// 获取子实体选择辅助按键
const subSelectKey = tool.subSelectKey;
1
2
3
4
5
2
3
4
5
提示
默认鼠标单击只能选择根实体，如果想选取子实体需要辅助按键配合，默认为'Shift'键。使用时可以根据实际需求调整辅助按键。
🌏 componentSelectKey 组件（渲染（Renderable）组件或Tranform组件）选择辅助按键
// 设置组件选择辅助按键为'Alt'
tool.componentSelectKey = 'Alt';
// 获取组件选择辅助按键
const componentSelectKey = tool.componentSelectKey;
1
2
3
4
5
2
3
4
5
提示
默认鼠标单击只能选择根实体，如果想选取组件需要辅助按键配合，默认为'Alt'键。使用时可以根据实际需求调整辅助按键。
🌏 selectObject 设置当前编辑对象（对象或对象数组），只写
// 加载gltf模型
engine.loadGLTF( '../assets/models/皮卡/皮卡.gltf' ).then( ( entity ) => {
// 设置方位编辑工具当前编辑对象或对象数组
engine.toolManager.activatedTool.selectObject = entity.transform; // [transform1, transform2...]
} );
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 接口
🌏 trimUpdate 微调更新接口
// 微调沿axis（'X', 'Y', 'Z'）轴，平移offset（旋转时为角度）
engine.toolManager.activatedTool.trimUpdate( axis, offset );
1
2
2