Skip to content

Selection

选择类,继承自SelectionBase,提供3D场景中几何元素的交互选择功能。支持单选、多选、悬停效果、视点更新等高级选择特性。

类定义

javascript
class Selection extends SelectionBase

属性

enableHover

悬停效果启用状态,控制是否启用鼠标悬停时的高亮效果。

类型: {boolean}
默认值: false

enableMultiSelection

多选功能启用状态,控制是否支持多对象选择。

类型: {boolean}
默认值: false

group

选择组,包含所有被选中对象的组。

类型: {Group}
只读: true

pickerGroup

拾取组,用于显示选择效果的组。

类型: {Group}
只读: true

hoverGroup

悬停组,用于显示悬停效果的组。

类型: {Group}
只读: true

currentSelectedCount

当前选择的对象数量,返回当前已选择的对象数量。

类型: {number}
只读: true

示例:

javascript
// 获取选择数量
const count = selection.currentSelectedCount;
console.log(`已选择 ${count} 个对象`);

updateViewPoint

视点更新状态,控制是否自动更新相机视点到选中对象。

类型: {boolean}
默认值: true

示例:

javascript
// 启用视点更新
selection.updateViewPoint = true;

// 禁用视点更新
selection.updateViewPoint = false;

glRenderer

WebGL渲染器实例,用于控制渲染状态和效果。

类型: {WebGLRenderer}
只读: true

方法

addPick(object3D)

添加对象到选择组,将选中的3D对象添加到选择组中,用于管理已选择的对象。

参数:

  • object3D {Object3D} - 要添加到选择组的3D对象

示例:

javascript
// 添加对象到选择组
selection.addPick(selectedObject);

// 检查选择数量
console.log('选择数量:', selection.currentSelectedCount);

pointerDownEvent(event)

指针按下事件处理,重写父类的指针按下事件处理,添加视点更新功能。记录按下位置,更新当前视点坐标。

参数:

  • event {PointerEvent} - 指针事件对象

示例:

javascript
// 重写指针按下事件
pointerDownEvent(event){
    super.pointerDownEvent(event);
    // 添加自定义逻辑
}

pointerMoveEvent(event)

指针移动事件处理,重写父类的指针移动事件处理,实现悬停效果。当启用悬停效果时,鼠标移动会显示对象的高亮效果。

参数:

  • event {PointerEvent} - 指针事件对象

示例:

javascript
// 重写指针移动事件
pointerMoveEvent(event){
    super.pointerMoveEvent(event);
    // 添加自定义逻辑
}

pointerUpEvent(event)

指针抬起事件处理,重写父类的指针抬起事件处理,实现选择逻辑。处理单选/多选、对象选择、事件分发等核心功能。

参数:

  • event {PointerEvent} - 指针事件对象

示例:

javascript
// 重写指针抬起事件
pointerUpEvent(event){
    super.pointerUpEvent(event);
    // 添加自定义逻辑
}

clear()

清除当前所有选择,清除所有已选择的对象,释放相关资源并触发更新事件。

示例:

javascript
// 清除所有选择
selection.clear();

// 检查选择数量
console.log('选择数量:', selection.currentSelectedCount); // 0

clearHover()

清除悬停效果,清除当前鼠标悬停时显示的所有高亮效果,释放相关资源。

示例:

javascript
// 清除悬停效果
selection.clearHover();

setInitViewPoint(vector3)

设置初始视点,设置初始视点位置,用于相机控制的默认目标点。

参数:

  • vector3 {Vector3} - 三维向量,表示视点位置

示例:

javascript
// 设置初始视点
const viewPoint = new THREE.Vector3(0, 0, 0);
selection.setInitViewPoint(viewPoint);

getCurrentViewPoint()

获取当前视点,返回当前的视点位置,即最后选择对象的中心点。

返回值:

  • {Vector3} 当前视点的三维向量

示例:

javascript
// 获取当前视点
const currentViewPoint = selection.getCurrentViewPoint();
console.log('当前视点:', currentViewPoint);

reverseMouseButton(boolean)

反转鼠标左、右键功能,切换鼠标左键和右键的功能。

参数:

  • boolean {Boolean} - 是否反转,true为反转,false为正常

返回值:

  • {boolean} 返回设置后的鼠标按键代码

示例:

javascript
// 反转鼠标按键功能
const mouseCode = selection.reverseMouseButton(true);
console.log('当前鼠标按键:', mouseCode);

事件

selected

对象被选中时触发。

事件数据:

  • object {Object3D} - 被选中的对象
  • selectedObjects {Array<Object3D>} - 当前所有被选中的对象

示例:

javascript
selection.addEventListener('selected', (event) => {
    console.log('选中对象:', event.object);
    console.log('当前选中数量:', event.selectedObjects.length);
});

unselected

取消选择时触发。

事件数据:

  • object {Object3D} - 被取消选择的对象
  • selectedObjects {Array<Object3D>} - 当前所有被选中的对象

示例:

javascript
selection.addEventListener('unselected', (event) => {
    console.log('取消选择对象:', event.object);
    console.log('当前选中数量:', event.selectedObjects.length);
});

update

选择状态更新时触发。

事件数据:

  • selectedObjects {Array<Object3D>} - 当前所有被选中的对象
  • hoveredObject {Object3D|null} - 当前悬停的对象

示例:

javascript
selection.addEventListener('update', (event) => {
    console.log('选择状态更新');
    console.log('选中对象:', event.selectedObjects);
    console.log('悬停对象:', event.hoveredObject);
});

reverse

鼠标右键事件时触发。

事件数据:

  • object {Object3D|null} - 右键点击的对象
  • point {Vector3} - 点击位置

示例:

javascript
selection.addEventListener('reverse', (event) => {
    console.log('右键点击对象:', event.object);
    console.log('点击位置:', event.point);
});

使用场景

对象选择

  • 鼠标点击选择3D对象
  • 支持单选和多选模式
  • 键盘快捷键支持(如Ctrl+点击多选)

悬停效果

  • 鼠标悬停时显示高亮效果
  • 提供视觉反馈
  • 改善用户体验

视点控制

  • 自动将相机移动到选中对象
  • 平滑的相机动画
  • 智能的视点计算

交互反馈

  • 选择状态的可视化表示
  • 事件驱动的交互逻辑
  • 自定义选择样式

相关链接

文档内容为北京逆维悦动科技有限公司版权所有,禁止未授权转载