日常记录 vue three 屏幕坐标转世界坐标

data中添加 mouse：null，

onDocumentMouseDown(event) {
      //屏幕坐标系转换为three.js坐标系  // 屏幕坐标为event.clientX   标准设备坐标event.clientX / window.innerWidth) * 2 - 1  //标准设备坐标(z=0.5这个值并没有一个具体的说法)
      let vector = new THREE.Vector3(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1,
        0.5
      )
      // 通过unproject方法，可以将标准设备坐标转世界坐标
      vector = vector.unproject(this.camera)
      // 进行剩下操作，比如判断鼠标是否选中某个物体
      console.log(vector)
      // 创建光线投射对象
      const raycaster = new THREE.Raycaster(
        this.camera.position,
        vector.sub(this.camera.position).normalize()
      )

      //射线只检查指定的成员-球体、圆柱、方块
      /*
      const intersects = raycaster.intersectObjects([
        this.sphere,
        //this.cylinder,
        this.cube
      ])
*/
      const intersects = raycaster.intersectObjects(this.scene.children, true)//射线检查所有指定对象的成员
      // 设置选中对象透明度为0.1
      if (intersects.length > 0) {
        intersects[0].object.material.transparent = true
        intersects[0].object.material.opacity = 0.1
        console.log('123',intersects[0].point)
        console.log(vector)
      }
    },

在mounted中添加鼠标点击事件

window.addEventListener('click', this.onDocumentMouseDown)//鼠标点击时间