关于Three.js THREE.Raycaster射线拾取不准确的原因

首先要关注THREE.Raycaster的属性，从three.js官网给出的例子[webgl_interactive_lines.html]可以得知此函数，可以控制线的精确度。

raycaster.params.Line.threshold = 0.05 ;

由于浏览器是一个2d视口，而在里面显示three.js的内容是3d场景，所以，现在有一个问题就是如何将2d视口的x和y坐标转换成three.js场景中的3d坐标。

然后要关注是否是全屏的canvas。

    spriteClick: function (event) {
       event.preventDefault();
      // 鼠标转换三维坐标
      // this.mouse.x = (event.clientX / document.getElementById("other").offsetWidth) * 2 - 1;
      // this.mouse.y = -(event.clientY / document.getElementById("other").offsetHeight) * 2 + 1;

     //this.mouse.x =   ( event.offsetX / this.goldenContainer.width ) * 2 - 1;
    //this.goldenContainer.width 当前画布的高
    // this.mouse.y = - (event.offsetY / this.goldenContainer.height) * 2 + 1;
    //this.goldenContainer.height 当前画布的宽

      this.mouse.x = ((event.clientX - document.getElementById("deviceCanvas").getBoundingClientRect().left) / document.getElementById("deviceCanvas").offsetWidth) * 2 - 1;
      this.mouse.y = -((event.clientY - document.getElementById("deviceCanvas").getBoundingClientRect().top) / document.getElementById("deviceCanvas").offsetHeight) * 2 + 1;

      let standardVector = new THREE.Vector3(this.mouse.x, this.mouse.y, 1);// 标准设备坐标
      // 标准设备坐标转世界坐标
      let worldVector = standardVector.unproject(this.camera);
      // 射线投射方向单位向量(worldVector坐标减相机位置坐标)
      let ray = worldVector.sub(this.camera.position).normalize();
      this.raycaster = new THREE.Raycaster(this.camera.position, ray);
      // 设置要获取的相交对象（数组）
      const objs = this.raycaster.intersectObjects(meshList, true);
      if (objs.length > 0) {
        // code......
      }
    },