javascript - 从球体内部查找单义坐标时出现的问题

Question

我正在使用 Three.js [r78]，而且我在这方面和一般的 JavaScript 方面都是菜鸟

我最终成功地从半径等于 500 的球体中心的透视摄像头广播了一条光线，当我使用浏览器检查时，交叉点的结果很好，但不太令人满意。我需要精确地确定一个点 cartesian or spherical doesn't matter 的坐标与同一点的晚点一起。当我选择一个特定点时，我会得到其笛卡尔坐标的不同值。有时这些值并不遥远，有时却截然不同。缩放[鼠标滚轮]存在问题，但不幸的是也没有更改它，就像在下面的示例中，我添加了一个白色标记来显示显然选择的点。真正点击的是红圈内的

这里从不同的视口(viewport)看到相同的点，但具有相同的缩放。我希望这两次尝试给出相同的值[当然，大约]。另一方面，我检查了相机到交点的距离始终为 500-，因此碰撞点似乎是完美计算的

我的两个问题，然后是基本代码[其余来自Valiant360 ]:

• 使用两个不同坐标计算的相同物理点[鼠标单击红圈]是这个 Three.js 版本的一个错误，还是我忘记了什么/做了一些错误？换句话说，我想从视口(viewport)独立地获得相同物理点击点的相同坐标
• 如果这是我的错，该怎么解决它，并且可能具有相同的值也改变缩放

预先感谢那些愿意提供帮助的人，
安东尼诺

<小时/>

    onMouseDown: function(a) 
    {
    [...]

    // retrieving normalized coordinates
    var mouse_2D_vector = new THREE.Vector2( ( event.clientX / window.innerWidth ) * 2 - 1,
                                    -( event.clientY / window.innerHeight ) * 2 + 1);        

    this._raycaster.setFromCamera(mouse_2D_vector, this._camera);

    var intersections = this._raycaster.intersectObjects( [this._mesh], true );
    intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null;

    if (intersections.length>0)
    {
        intersections[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

        console.log("Intersected object.x:", intersections[ 0 ].point.x);
        console.log("Intersected object.y:", intersections[ 0 ].point.y);
        console.log("Intersected object.z:", intersections[ 0 ].point.z);
    }

    console.log('intersections.length: ' + intersections.length);       

    },

Answer 1

光线转换的问题是:

如果场景不完全是 window.innerWidth x window.innerHeight，则由于缩放不正确，屏幕上的“鼠标单击”位置可能会被错误计算。这不是 Three.js 的错误，这只是人们一遍又一遍地重复使用相同代码进行光线转换而没有意识到需要调整比例的问题。

您可以硬编码宽度和高度来替换 window.innerwidth/height

或使用 JQuery $elements