three.js实现点击事件（vue）

three.js 实现点击事件

1.加载模型（通过点击模型触发事件）

2.通过射线获取到事件源 (new THREE.Raycaster()和new THREE.Vector2()）

3.通过点击到该模型使用名字匹配 clickedObject.name==“xx”

简单示例：

addEventListener监听事件触发

window.addEventListener("click", this.onClick, false);

创建 Raycaster和Vector2

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2(); 

计算鼠标或触摸点的位置 （这里的event是通过事件监听获取）

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

更新射线

raycaster.setFromCamera( mouse, this.camera );

计算与所有对象的交点 得到一个数组

const intersects = raycaster.intersectObjects( this.scene.children, true );

判断交点数组的长度 （如果事件触发了会把监听到的数据放到该数组中）

  if ( intersects.length > 0 ) {
 // intersects[0] 包含了第一个交点  在这里处理事件
 const clickedObject = intersects[0].object;
    if(clickedObject.name===clickedObject.name){
          this.constructor(false)
      console.log("获取的当前模型信息:", clickedObject);
      alert(clickedObject.name)
    }
}

下面是完整代码：

//监听点击事件
window.addEventListener("click", this.onClick, false);
//事件函数
  methods: {
    onClick(event) {
      const raycaster = new THREE.Raycaster();
      const mouse = new THREE.Vector2();
      // 计算鼠标或触摸点的位置
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      // 更新射线   注意——> this.camera 是相机   定义到data里的 
      raycaster.setFromCamera(mouse, this.camera);
      // 计算与所有对象的交点
      const intersects = raycaster.intersectObjects(this.scene.children, true);
      if (intersects.length > 0) {
        // 处理点击事件
        // intersects[0] 包含了第一个交点
        const clickedObject = intersects[0].object;
        //通过点击到该模型用名字匹配
        if (clickedObject.name === clickedObject.name) {
          console.log("获取的当前模型信息:", clickedObject);
          alert(clickedObject.name);
        }
      }
   }
}

下面是运行效果：

• 实现效果

以上是three.js的点击事件实现