409 lines
12 KiB
TypeScript
409 lines
12 KiB
TypeScript
/**
|
||
* 三维场景交互系统
|
||
* 处理鼠标悬停、点击、双击等交互事件
|
||
* 提供物体高亮和轮廓效果
|
||
*/
|
||
import { navigateTo } from 'nuxt/app'
|
||
import * as THREE from 'three'
|
||
import type { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
|
||
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js'
|
||
import { useRoute } from 'vue-router'
|
||
import { usePowerStationStore } from '~/stores/powerStation'
|
||
import type { HighlightConfig, RaycasterConfig } from './types'
|
||
|
||
// ============================================================
|
||
// 配置常量
|
||
// ============================================================
|
||
|
||
/** 悬停轮廓颜色 */
|
||
const HOVER_OUTLINE_COLOR = '#435c9d'
|
||
|
||
/** 点击轮廓颜色 */
|
||
const CLICK_OUTLINE_COLOR = '#9d7e43'
|
||
|
||
/** 轮廓通道配置 */
|
||
const OUTLINE_PASS_CONFIG = {
|
||
edgeStrength: 2,
|
||
edgeGlow: 1,
|
||
edgeThickness: 1,
|
||
} as const
|
||
|
||
/** 默认高亮配置 */
|
||
const DEFAULT_HIGHLIGHT_CONFIG: HighlightConfig = {
|
||
color: new THREE.Color(0x00ff00),
|
||
intensity: 0.5,
|
||
duration: 200,
|
||
}
|
||
|
||
/** 默认射线检测配置 */
|
||
const DEFAULT_RAYCASTER_CONFIG: RaycasterConfig = {
|
||
recursive: true,
|
||
threshold: 0.1,
|
||
}
|
||
|
||
// ============================================================
|
||
// 材质管理
|
||
// ============================================================
|
||
|
||
/** 存储原始材质用于恢复 */
|
||
const originalMaterials = new Map<string, THREE.Material | THREE.Material[]>()
|
||
|
||
/**
|
||
* 高亮物体（使用线框材质）
|
||
* @param object - 要高亮的物体
|
||
* @param config - 高亮配置
|
||
*/
|
||
const highlightObject = (
|
||
object: THREE.Object3D,
|
||
config: HighlightConfig = DEFAULT_HIGHLIGHT_CONFIG
|
||
) => {
|
||
object.traverse(child => {
|
||
if (child instanceof THREE.Mesh) {
|
||
const uuid = child.uuid
|
||
|
||
// 存储原始材质
|
||
if (!originalMaterials.has(uuid)) {
|
||
originalMaterials.set(uuid, child.material)
|
||
}
|
||
|
||
// 创建高亮材质
|
||
const highlightMaterial = new THREE.MeshBasicMaterial({
|
||
color: config.color,
|
||
transparent: true,
|
||
opacity: config.intensity,
|
||
wireframe: true,
|
||
})
|
||
|
||
child.material = highlightMaterial
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 取消高亮物体（恢复原始材质）
|
||
* @param object - 要取消高亮的物体
|
||
*/
|
||
const unhighlightObject = (object: THREE.Object3D) => {
|
||
object.traverse(child => {
|
||
if (child instanceof THREE.Mesh) {
|
||
const uuid = child.uuid
|
||
const originalMaterial = originalMaterials.get(uuid)
|
||
|
||
if (originalMaterial) {
|
||
child.material = originalMaterial
|
||
originalMaterials.delete(uuid)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// ============================================================
|
||
// 主交互钩子
|
||
// ============================================================
|
||
|
||
/**
|
||
* 交互系统组合式函数
|
||
* @param getScene - 获取场景
|
||
* @param getCamera - 获取相机
|
||
* @param getComposer - 获取后期处理合成器
|
||
* @param getContainer - 获取容器元素
|
||
* @param modelGroup - 模型组
|
||
* @param getArchetypeModel - 获取原型模型
|
||
*/
|
||
export function useInteraction(
|
||
getScene: () => THREE.Scene,
|
||
getCamera: () => THREE.PerspectiveCamera,
|
||
getComposer: () => EffectComposer,
|
||
getContainer: () => HTMLElement | undefined,
|
||
modelGroup: THREE.Group,
|
||
getArchetypeModel: () => THREE.Object3D | null
|
||
) {
|
||
const store = usePowerStationStore()
|
||
const route = useRoute()
|
||
|
||
// 射线检测器
|
||
const raycaster = new THREE.Raycaster()
|
||
const mouse = new THREE.Vector2()
|
||
|
||
// 轮廓通道
|
||
let hoverOutlinePass: OutlinePass
|
||
let clickOutlinePass: OutlinePass
|
||
|
||
// 当前交互状态
|
||
let currentHoverObject: THREE.Object3D | null = null
|
||
let currentClickObject: THREE.Object3D | null = null
|
||
|
||
// ============================================================
|
||
// 射线检测
|
||
// ============================================================
|
||
|
||
/**
|
||
* 获取鼠标与场景物体的交点
|
||
* @param event - 鼠标事件
|
||
* @returns 交点数组
|
||
*/
|
||
const getIntersects = (event: MouseEvent): THREE.Intersection[] => {
|
||
const container = getContainer()
|
||
const camera = getCamera()
|
||
|
||
if (!container || !camera) return []
|
||
|
||
const rect = container.getBoundingClientRect()
|
||
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
|
||
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
|
||
|
||
raycaster.setFromCamera(mouse, camera)
|
||
|
||
return raycaster.intersectObjects(modelGroup.children, true)
|
||
}
|
||
|
||
/**
|
||
* 查找具有用户数据ID的父级物体
|
||
* @param object - 起始物体
|
||
* @returns 具有ID的物体或null
|
||
*/
|
||
const findObjectWithId = (object: THREE.Object3D): THREE.Object3D | null => {
|
||
let target = object
|
||
|
||
while (target && !target.userData.id && target !== modelGroup) {
|
||
if (target.parent) {
|
||
target = target.parent
|
||
} else {
|
||
break
|
||
}
|
||
}
|
||
|
||
return target?.userData.id ? target : null
|
||
}
|
||
|
||
// ============================================================
|
||
// 高亮效果
|
||
// ============================================================
|
||
|
||
/**
|
||
* 高亮悬停物体
|
||
* @param object - 要高亮的物体（null清除高亮）
|
||
*/
|
||
const highlightHover = (object: THREE.Object3D | null) => {
|
||
if (!hoverOutlinePass) return
|
||
|
||
if (object && object !== currentClickObject) {
|
||
if (currentHoverObject !== object) {
|
||
hoverOutlinePass.selectedObjects = [object]
|
||
currentHoverObject = object
|
||
}
|
||
} else {
|
||
hoverOutlinePass.selectedObjects = []
|
||
currentHoverObject = null
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 高亮点击物体
|
||
* @param object - 要高亮的物体（null清除高亮）
|
||
*/
|
||
const highlightClick = (object: THREE.Object3D | null) => {
|
||
if (!clickOutlinePass) return
|
||
|
||
if (object) {
|
||
// 清除相同物体的悬停高亮
|
||
if (currentHoverObject === object) {
|
||
hoverOutlinePass.selectedObjects = []
|
||
currentHoverObject = null
|
||
}
|
||
|
||
clickOutlinePass.selectedObjects = [object]
|
||
currentClickObject = object
|
||
} else {
|
||
clickOutlinePass.selectedObjects = []
|
||
currentClickObject = null
|
||
}
|
||
}
|
||
|
||
// ============================================================
|
||
// 事件处理
|
||
// ============================================================
|
||
|
||
/**
|
||
* 点击事件处理
|
||
*/
|
||
const onClick = (event: MouseEvent) => {
|
||
const intersects = getIntersects(event)
|
||
|
||
if (intersects.length > 0 && intersects[0]) {
|
||
const target = findObjectWithId(intersects[0].object)
|
||
|
||
if (target && target.userData.id) {
|
||
const id = target.userData.id
|
||
const currentRouteNodeId = route.query.currentNodeId as string
|
||
const shouldHighlight = id !== currentRouteNodeId
|
||
|
||
// 更新store中的选中节点
|
||
store.selectNode({ id, label: target.name || `节点 ${id}` })
|
||
|
||
// 只有ID不一致时才高亮
|
||
if (shouldHighlight) {
|
||
highlightClick(target)
|
||
} else {
|
||
highlightClick(null)
|
||
}
|
||
}
|
||
} else {
|
||
// 点击空白区域，恢复到路由参数值
|
||
const currentRouteNodeId = route.query.currentNodeId as string
|
||
if (currentRouteNodeId) {
|
||
store.selectNode({ id: currentRouteNodeId, label: currentRouteNodeId })
|
||
} else {
|
||
store.selectNode({ id: '' })
|
||
}
|
||
highlightClick(null)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 双击事件处理
|
||
*/
|
||
const onDoubleClick = async (event: MouseEvent) => {
|
||
const intersects = getIntersects(event)
|
||
|
||
if (intersects.length > 0 && intersects[0]) {
|
||
const target = findObjectWithId(intersects[0].object)
|
||
|
||
if (target && target.userData.id) {
|
||
const id = target.userData.id
|
||
await navigateTo({
|
||
query: {
|
||
...route.query,
|
||
currentNodeId: id,
|
||
},
|
||
})
|
||
}
|
||
} else {
|
||
// 双击空白区域，返回父级
|
||
await handleNavigateToParent()
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 导航到父级节点
|
||
*/
|
||
const handleNavigateToParent = async () => {
|
||
const currentRouteNodeId = route.query.currentNodeId as string
|
||
|
||
// 如果是根节点，不操作
|
||
if (!currentRouteNodeId || !currentRouteNodeId.includes('~')) {
|
||
return
|
||
}
|
||
|
||
// 删除最后一个"~"之后的内容
|
||
const lastUnderlineIndex = currentRouteNodeId.lastIndexOf('~')
|
||
if (lastUnderlineIndex > 0) {
|
||
const newCurrentNodeId = currentRouteNodeId.substring(0, lastUnderlineIndex)
|
||
|
||
await navigateTo({
|
||
query: {
|
||
...route.query,
|
||
currentNodeId: newCurrentNodeId,
|
||
},
|
||
})
|
||
|
||
store.selectNode({ id: newCurrentNodeId, label: newCurrentNodeId })
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 鼠标移动事件处理
|
||
*/
|
||
const onMouseMove = (event: MouseEvent) => {
|
||
const intersects = getIntersects(event)
|
||
|
||
if (intersects.length > 0 && intersects[0]) {
|
||
const target = findObjectWithId(intersects[0].object)
|
||
highlightHover(target)
|
||
} else {
|
||
highlightHover(null)
|
||
}
|
||
}
|
||
|
||
// ============================================================
|
||
// 初始化与清理
|
||
// ============================================================
|
||
|
||
/**
|
||
* 初始化交互系统
|
||
*/
|
||
const initInteraction = () => {
|
||
const scene = getScene()
|
||
const camera = getCamera()
|
||
const composer = getComposer()
|
||
const container = getContainer()
|
||
|
||
if (!scene || !camera || !composer || !container) return
|
||
|
||
const width = container.clientWidth
|
||
const height = container.clientHeight
|
||
|
||
// 创建悬停轮廓通道
|
||
hoverOutlinePass = new OutlinePass(new THREE.Vector2(width, height), scene, camera)
|
||
hoverOutlinePass.edgeStrength = OUTLINE_PASS_CONFIG.edgeStrength
|
||
hoverOutlinePass.edgeGlow = OUTLINE_PASS_CONFIG.edgeGlow
|
||
hoverOutlinePass.edgeThickness = OUTLINE_PASS_CONFIG.edgeThickness
|
||
hoverOutlinePass.visibleEdgeColor.set(HOVER_OUTLINE_COLOR)
|
||
hoverOutlinePass.hiddenEdgeColor.set(HOVER_OUTLINE_COLOR)
|
||
composer.addPass(hoverOutlinePass)
|
||
|
||
// 创建点击轮廓通道
|
||
clickOutlinePass = new OutlinePass(new THREE.Vector2(width, height), scene, camera)
|
||
clickOutlinePass.edgeStrength = OUTLINE_PASS_CONFIG.edgeStrength
|
||
clickOutlinePass.edgeGlow = OUTLINE_PASS_CONFIG.edgeGlow
|
||
clickOutlinePass.edgeThickness = OUTLINE_PASS_CONFIG.edgeThickness
|
||
clickOutlinePass.visibleEdgeColor.set(CLICK_OUTLINE_COLOR)
|
||
clickOutlinePass.hiddenEdgeColor.set(CLICK_OUTLINE_COLOR)
|
||
composer.addPass(clickOutlinePass)
|
||
|
||
// 绑定事件
|
||
container.addEventListener('click', onClick)
|
||
container.addEventListener('dblclick', onDoubleClick)
|
||
container.addEventListener('mousemove', onMouseMove)
|
||
}
|
||
|
||
/**
|
||
* 更新轮廓通道尺寸
|
||
* @param width - 新宽度
|
||
* @param height - 新高度
|
||
*/
|
||
const updatePassSize = (width: number, height: number) => {
|
||
if (hoverOutlinePass) hoverOutlinePass.setSize(width, height)
|
||
if (clickOutlinePass) clickOutlinePass.setSize(width, height)
|
||
}
|
||
|
||
/**
|
||
* 清理资源
|
||
*/
|
||
const dispose = () => {
|
||
const container = getContainer()
|
||
if (container) {
|
||
container.removeEventListener('click', onClick)
|
||
container.removeEventListener('dblclick', onDoubleClick)
|
||
container.removeEventListener('mousemove', onMouseMove)
|
||
}
|
||
}
|
||
|
||
// ============================================================
|
||
// 导出接口
|
||
// ============================================================
|
||
|
||
return {
|
||
/** 初始化交互系统 */
|
||
initInteraction,
|
||
/** 高亮点击物体 */
|
||
highlightClick,
|
||
/** 高亮悬停物体 */
|
||
highlightHover,
|
||
/** 更新轮廓通道尺寸 */
|
||
updatePassSize,
|
||
/** 清理资源 */
|
||
dispose,
|
||
}
|
||
}
|