ThreeJs鼠标经过添加边框

ThreeJs鼠标经过添加边框

import {
  EdgesGeometry,
  Intersection,
  LineBasicMaterial,
  LineSegments,
  Object3D
} from 'three'

// 画布移动选中模型
const moveObject = ref()

// 定义了一个名为highlightMaterial的变量，它是一个LineBasicMaterial对象，用于给选中的模型添加红色边框。颜色为红色（0x1890ff），线宽为5。
const highlightMaterial = new LineBasicMaterial({ color: 0xffffff, linewidth: 5 })

/**
 * @description: 鼠标移动事件
 * @return {*}
 */
const handleMousemove = (_event: MouseEvent, intersect: Intersection): void => {
  const remove = () => {
    moveObject.value?.traverse((child: Object3D) => {
      if (!moveObject.value) return
      if (child instanceof LineSegments) {
        // 处理材质。材质的纹理不会被处理。需要通过Texture处理
        child.material.dispose()
        child.geometry.dispose()
        moveObject.value?.remove(child)
      }
    })
  }
  if (intersect) {
    // 删除模型边框
    remove()

    // 给模型添加边框
    moveObject.value = intersect.object
    const edges = new EdgesGeometry((intersect.object as Mesh).geometry)
    const line = new LineSegments(edges, highlightMaterial)
    intersect.object.add(line)
  } else {
    remove()
  }
}