ThreeJs模型点击事件

细心细心细心

已于 2023-07-13 13:55:07 修改

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Threejs 文章标签： javascript

于 2023-07-11 11:49:44 首次发布

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

Threejs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在ThreeJs中实现模型的点击事件。通过创建Raycaster对象，结合鼠标坐标和相机信息计算光线投射，检测鼠标点击时与场景中哪个模型相交，进而改变相交模型的颜色。此方法适用于交互式三维场景的开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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