Selection
选择类,继承自SelectionBase,提供3D场景中几何元素的交互选择功能。支持单选、多选、悬停效果、视点更新等高级选择特性。
类定义
class Selection extends SelectionBase属性
enableMultiSelection
多选功能启用状态,控制是否支持多对象选择。
类型: {boolean}
默认值: false
示例:
// 获取多选状态
const canMultiSelect = selection.enableMultiSelection;
console.log('多选功能:', canMultiSelect ? '启用' : '禁用');
// 启用多选
selection.enableMultiSelection = true;
// 禁用多选(单选模式)
selection.enableMultiSelection = false;enableHover
悬停效果启用状态,控制是否启用鼠标悬停时的高亮效果。
类型: {boolean}
默认值: false
示例:
// 获取悬停效果状态
const hasHover = selection.enableHover;
console.log('悬停效果:', hasHover ? '启用' : '禁用');
// 启用悬停效果
selection.enableHover = true;
// 禁用悬停效果
selection.enableHover = false;currentSelectedCount
当前选择的对象数量,返回当前已选择的对象数量。
类型: {number}
只读: true
示例:
// 获取选择数量
const count = selection.currentSelectedCount;
console.log(`已选择 ${count} 个对象`);updateViewPoint
视点更新状态,控制是否自动更新相机视点到选中对象。
类型: {boolean}
默认值: true
示例:
// 获取视点更新状态
const updateView = selection.updateViewPoint;
console.log('视点更新:', updateView ? '启用' : '禁用');
// 启用视点更新
selection.updateViewPoint = true;
// 禁用视点更新
selection.updateViewPoint = false;group
选择组,包含所有被选中对象的组。
类型: {Group}
只读: true
glRenderer
WebGL渲染器实例,用于控制渲染状态和效果。
类型: {WebGLRenderer}
只读: true
方法
addPick(object3D)
添加对象到选择组,将选中的3D对象添加到选择组中,用于管理已选择的对象。
参数:
object3D{Object3D} - 要添加到选择组的3D对象
示例:
// 添加对象到选择组
selection.addPick(selectedObject);
// 检查选择数量
console.log('选择数量:', selection.currentSelectedCount);pointerDownEvent(event)
指针按下事件处理,重写父类的指针按下事件处理,添加视点更新功能。记录按下位置,更新当前视点坐标。
参数:
event{PointerEvent} - 指针事件对象
示例:
// 重写指针按下事件
pointerDownEvent(event){
super.pointerDownEvent(event);
// 添加自定义逻辑
}pointerMoveEvent(event)
指针移动事件处理,重写父类的指针移动事件处理,实现悬停效果。当启用悬停效果时,鼠标移动会显示对象的高亮效果。
参数:
event{PointerEvent} - 指针事件对象
示例:
// 重写指针移动事件
pointerMoveEvent(event){
super.pointerMoveEvent(event);
// 添加自定义逻辑
}pointerUpEvent(event)
指针抬起事件处理,重写父类的指针抬起事件处理,实现选择逻辑。处理单选/多选、对象选择、事件分发等核心功能。
参数:
event{PointerEvent} - 指针事件对象
示例:
// 重写指针抬起事件
pointerUpEvent(event){
super.pointerUpEvent(event);
// 添加自定义逻辑
}clear()
清除当前所有选择,清除所有已选择的对象,释放相关资源并触发更新事件。
示例:
// 清除所有选择
selection.clear();
// 检查选择数量
console.log('选择数量:', selection.currentSelectedCount); // 0clearHover()
清除悬停效果,清除当前鼠标悬停时显示的所有高亮效果,释放相关资源。
示例:
// 清除悬停效果
selection.clearHover();setInitViewPoint(vector3)
设置初始视点,设置初始视点位置,用于相机控制的默认目标点。
参数:
vector3{Vector3} - 三维向量,表示视点位置
示例:
// 设置初始视点
const viewPoint = new THREE.Vector3(0, 0, 0);
selection.setInitViewPoint(viewPoint);getCurrentViewPoint()
获取当前视点,返回当前的视点位置,即最后选择对象的中心点。
返回值:
- {Vector3} 当前视点的三维向量
示例:
// 获取当前视点
const currentViewPoint = selection.getCurrentViewPoint();
console.log('当前视点:', currentViewPoint);reverseMouseButton(boolean)
反转鼠标左、右键功能,设置鼠标左键和右键的功能是否反转。当启用反转时,右键用于选择,左键用于旋转。
参数:
boolean{Boolean} - 是否反转鼠标功能,true为反转,false为正常
返回值:
- {number} 当前鼠标按钮配置
示例:
// 反转鼠标功能(右键选择,左键旋转)
selection.reverseMouseButton(true);
// 恢复正常鼠标功能(左键选择,右键旋转)
selection.reverseMouseButton(false);事件
selected
对象被选中时触发。
事件数据:
object{Object3D} - 被选中的对象rayResult{IntersectionResult} - 射线检测结果boundingSphere{Sphere} - 选中对象的包围球target{Selection} - 触发事件的Selection实例
示例:
selection.addEventListener('selected', (event) => {
console.log('选中对象:', event.object);
console.log('射线检测结果:', event.rayResult);
console.log('包围球中心:', event.boundingSphere.center);
});unselected
取消选择时触发。
事件数据:
target{Selection} - 触发事件的Selection实例
示例:
selection.addEventListener('unselected', (event) => {
console.log('取消选择');
});update
选择状态更新时触发。
事件数据:
target{Selection} - 触发事件的Selection实例
示例:
selection.addEventListener('update', (event) => {
console.log('选择状态更新');
});reverse
鼠标右键事件时触发。
事件数据:
object{PointerEvent} - 原始指针事件对象target{Selection} - 触发事件的Selection实例
示例:
selection.addEventListener('reverse', (event) => {
console.log('右键事件:', event.object);
});使用场景
对象选择
- 鼠标点击选择3D对象
- 支持单选和多选模式
- 键盘快捷键支持(如Ctrl+点击多选)
悬停效果
- 鼠标悬停时显示高亮效果
- 提供视觉反馈
- 改善用户体验
视点控制
- 自动将相机移动到选中对象
- 平滑的相机动画
- 智能的视点计算
交互反馈
- 选择状态的可视化表示
- 事件驱动的交互逻辑
- 自定义选择样式
相关链接
- SelectionBase - 选择基础类
- SceneManager - 场景管理器
- RenderManager - 渲染管理器