Javascript ThreeJS raycaster关闭，相机和对象的坐标大于1000000

我已经设置了一个光线投射器，以便从画布执行对象选择

它适用于camera.position.x和object.position.x的小值，但我的问题是，当camera.position.x是一个大数字时，它不起作用，在我的例子中是10000

事实上，当鼠标指针指向我的对象的右侧时，我会有一个反应，整个对象的长度！我的猜测是，用如此巨大的数字进行计算会造成这种失真，但不能确定

                var raycaster = new THREE.Raycaster();
                var vector = new THREE.Vector2();

                camera.position.x = 11000000;
                object.position.x = 11000000;

                function onMouseMove( event ) {

                    vector.x = ( (event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.clientWidth ) * 2 - 1;
                    vector.y = - ( (event.clientY - renderer.domElement.offsetTop) / renderer.domElement.clientHeight ) * 2 + 1;

                    raycaster.setFromCamera(vector, camera);

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

                    if(intersects.length>0){
                        alert("INTERSECTION " + intersects[0].object.userData.name);
                        }

                }canvas.addEventListener('mousemove', onMouseMove, false);

我省略了在场景中添加对象和其他一些东西，这样帖子就不会太长。例如，当camera.position.x和object.position.x设置为小于1000000的某个值时，这种方法可以工作，但即使在该值下也会出现一些失真

编辑1

                var scene = new THREE.Scene();

                var canvas = document.getElementById('canvas');

                var height = canvas.clientHeight;
                var width = canvas.clientWidth;

                var camera = new THREE.PerspectiveCamera(70, width/height, 1, 1000);

                var renderer = new THREE.WebGLRenderer();
                renderer.setSize(width, height);
                canvas.appendChild(renderer.domElement);

另外，这里是我的html中“canvas”div所在的部分，我还尝试了canvas.offsetLef而不是renderer.domElement.offsetLeft等

编辑2

<div id="content" ng-controller="ShippingCtrl">

        <div id="left_panel">

        </div>

        <div id="canvas" style="width:900px; height:600px; border:1px solid white">

        </div>

        <div id="right_pannel">

        </div></div>

---

怀疑浮点舍入错误我在Matlab中遍历了未投影，以了解不同的实现将如何处理它。我从示例中的摄影机矩阵开始

摄像机投影

 4.951969385147095e-01                         0                         0                         0
                     0     1.428148031234741e+00                         0                         0
                     0                         0    -1.001000523567200e+00    -1.000000000000000e+00
                     0                         0    -2.001000404357910e+00                         0

照相机世界

       1           0           0           0
       0           1           0           0
       0           0           1           0
 4000000     2000000     1000800           1

javascript通过threejs计算的摄影机投影矩阵的逆

逆相机投影矩阵

    2.0193986892700195                          0                           0                       0  
                     0          0.700207531452179                           0                       0  
                     0                          0                           0      -0.499750018119812  
                     0                          0                          -1      0.5002500414848328

用Matlab计算摄像机投影矩阵的逆

 2.019398591193624e+00                         0                         0                         0
                     0     7.002075262012054e-01                         0                         0
                     0                         0                         0    -4.997500239490878e-01
                     0                         0    -1.000000000000000e+00     5.002500356257574e-01

将矩阵相乘（逆摄影机投影矩阵*摄影机世界矩阵）

三人一组

    2.0193986892700195                          0                           0                       0  
                     0          0.700207531452179                           0                       0
          -1999000.125               -999500.0625                -500149.8125      -0.499750018119812
           2001000.125               1000500.0625                   500649.25      0.5002500414848328

Matlab中的相同计算

CamprojectionNV*camWorld

 2.019398591193624e+00                         0                         0                         0
                     0     7.002075262012054e-01                         0                         0
-1.999000095796351e+06    -9.995000478981755e+05    -5.001498239682470e+05    -4.997500239490878e-01
 2.001000142503030e+06     1.000500071251515e+06     5.006492356542581e+05     5.002500356257574e-01  

为了简单起见，在屏幕中心使用一个点[0,0,0.5,1.0]，并乘以和除以w

来自3J

     3599999.783405974,        1799999.891702987,        900796.0640709081

来自Matlab

 4.000000000000000e+06     2.000000000000000e+06     1.000796005991391e+06     1.000000000000000e+00

舍入误差不断累积。我不太明白的是，C++（Matlab）和JavaScript（SujEJS）在IEEE标准754位64位浮点数的处理上是如何不同的。 对于我的使用，保留数据的世界坐标系非常重要，因此为了克服拾取/浮点问题，我只需将场景平移回原点，方法是使用其位置属性将平移放置在顶部组节点上，并将摄影机设置为查看该位置。我将相机和视图信息与场景分开，以便在同一数据上实现多个视图。因此，在我的场景对象上，我实现了

center(): THREE.Vector3 {
    let datacenter = this.dataCenter();
    let center = datacenter.add(this.sceneLocation);
    return center;
}

worldBBox(): THREE.Box3 {
    return new THREE.Box3().setFromObject(this.pathsGroup);
}

protected updateScenePosition(): void {
    this.sceneLocation = this.dataCenter().negate();
    this.scene.position.set(this.sceneLocation.x, this.sceneLocation.y, this.sceneLocation.z);
    this.scene.matrixWorldNeedsUpdate=true;
    this.scene.updateMatrixWorld(true);
}

protected dataCenter(): THREE.Vector3 {
    let dataBBox = this.dataBoundingBox();
    let center = dataBBox.max.clone();
    center.sub(dataBBox.min);
    center.divideScalar(2.0);
    center.add(dataBBox.min);
    return center;
}

protected dataBoundingBox(): THREE.Box3 {
    let bbox = new THREE.Box3().setFromObject(this.pathsGroup);
    this.pathsGroup.worldToLocal(bbox.min);
    this.pathsGroup.worldToLocal(bbox.max);

    return bbox;
}

当一个对象被添加到场景中时，我调用updateScenePosition，尽管它可能不是严格必需的，因为新对象可能位于大致相同的区域，并且可见错误可能已经用初始对象补偿了

然后更新相机

centerView（）：无效{

---

我希望确保HTML/CSS中的DomeElement和canvas原点坐标是相同的，并且没有边距、浏览器缩放或偏移使光线偏离您的意图。然后确保渲染器的设置大小也是正确的。我从未见过由于浮点不精确而导致光线丢失。我想说您的设置有问题。也许修改一下你的完整代码可以帮助其他人指出这个问题。我也有同样的问题。但是如果我使用OrbitControl旋转和平移场景，raycaster会发现相交对象。你找到了解决方案吗？下面是一个对threejs交互立方体进行黑客攻击的示例来演示这个问题。

    this.look = this.bigscene.center().clone();

    this.camera.position.set(this.look.x, this.look.y, this.look.z+3600); 

    this.camera.lookAt(this.look);
    this.controls.target.set(this.look.x, this.look.y, this.look.z);

    this.light.position.copy(this.camera.position); //headlight
}