ThreeJs模型点击事件_threejs点击事件

ThreeJs模型点击事件

// 进行 raycasting（光线投射）。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标点击了什么物体）
const raycaster = new Raycaster()
// 获取鼠标坐标 处理点击某个模型的事件
const mouse = new Vector2()

/**
 * @description: 鼠标点击事件
 * @param {*} event 鼠标事件
 * @return {*}
 */
const handleClick = (event: MouseEvent): void => {
  // 通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
  // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
  raycaster.setFromCamera(mouse, camera)
  // 获取raycaster直线和所有模型相交的数组集合。第二个参数表示是否需要递归查找
  const intersects = raycaster.intersectObjects(scene.children, true)
   // 将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可
  intersects.forEach(intersect => {
    const object = intersect.object
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23