ThreeJS获取三维世界坐标（坐标返回数组为null）

three获取世界坐标的方法是通过将二维坐标转换为三维坐标，具体代码如下所示。

实现代码

 onMouseClick(event) {
      event.preventDefault();
      var vector = new THREE.Vector3(); //三维坐标对象
      vector.set(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1,
        0.5
      );
      vector.unproject(this.threeCamera);
      var raycaster = new THREE.Raycaster(
        this.threeCamera.position,
        vector.sub(this.threeCamera.position).normalize()
      );
      var intersects = raycaster.intersectObjects(
        this.threeSence.children,
        true
      );
      if (intersects.length > 0) {
        var selected = intersects[0]; //取第一个物体
        console.log("x坐标:" + selected.point.x);
        console.log("y坐标:" + selected.point.y);
        console.log("z坐标:" + selected.point.z);
      }
    },

添加监听事件

document.addEventListener('click', function(e){
      self.onMouseClick(e);
    });

遇到问题是射线与模型返回相交的数组长度intersects.length = 0

总结：

实际通俗原因就是intersectObjects此函数通过递归调用去判断与模型相交的坐标信息，intersectObjects第二个参数默认是false，只去判断第一层数组，所以如果第一层没有直接返回的就是空数组，如果改成true，直接就会返回与模型相交部分的坐标点。

参考文献：

https://cloud.tencent.com/developer/ask/153951
https://github.com/mrdoob/three.js/issues/8081