callBack方式实现threejs点击事件Raycaster

我用的的示例类发方式来初始化场景。

类里面定义点击方法。

initMouse(fun) {
    window.addEventListener("click", (event) => {
      this.clickObject(event, fun);
    });
  }
  // 鼠标事件
  clickObject(event, fun) {
    // 计算点击位置的归一化设备坐标
    const mouse = new THREE.Vector2();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    // 创建射线投射器
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, this.camera);
    // 获取与射线相交的物体数组
    const intersects = raycaster.intersectObjects(this.scene.children, true);
    if (intersects.length > 0) {
      // intersects[0].object 是与射线相交的第一个物体
      const clickedObject = intersects[0].object;
      // 这里可以进一步处理点击的物体
      fun(intersects[0].object);
      // clickedObject.material.color.set(0xff0000); // 设置点击物体的颜色为红色
    }
  }

使用时调用initMouse传入回调函数。

 ffThree.initMouse(callBack);

function callBack(obje) {
  console.log("obje为选中的物体 下面写对选中物体做的事情");
  obje.material.color.set(0xff0000);
}