ThreeJs鼠标经过添加边框

细心细心细心

已于 2023-07-19 15:43:10 修改

阅读量177

点赞数 1

分类专栏： Threejs 文章标签：计算机外设前端 javascript

于 2023-07-19 15:42:43 首次发布

本文链接：https://blog.csdn.net/yangyangnb666/article/details/131810595

版权

Threejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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()
  }
}