如果相机移动，three.js中的点坐标会改变吗？答案

【问题标题】：Does the point coordinate in three.js change if the camera moves?如果相机移动，three.js中的点坐标会改变吗？
【发布时间】：2020-09-16 23:13:42
【问题描述】：

我正在使用 raycaster 函数来获取纹理部分的坐标，作为创建将链接到我网站的其他部分的区域的初步准备。我使用的模型是空心的，我从内部的一个点投射到与模型皮肤的交叉点。我已经使用此处和其他地方建议的标准技术来确定鼠标位置在 3d 空间中的坐标：

        //1. sets the mouse position with a coordinate system where the center
        //   of the screen is the origin
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        
        console.log("mouse position: (" + mouse.x + ", "+ mouse.y + ")");

        //2. set the picking ray from the camera position and mouse coordinates
        raycaster.setFromCamera( mouse, camera );    

        //3. compute intersections
        var intersects = raycaster.intersectObjects( scene.children, true );
        var intersect = null;
        var point = null;

        //console.log(intersects);

        for ( var i = 0; i < intersects.length; i++ ) {
            console.log(intersects[i]);
            if (i = intersects.length - 1) {
            intersect = intersects[ i ];
            point =  intersect[ "point" ];
            }

这可行，但如果相机位置发生变化，我会得到不一致的结果。我现在的假设是，这是因为鼠标坐标是从屏幕中心生成的，并且自从我移动了相机位置后，该中心发生了变化。我知道无论相机移动如何，getWorldPosition 都应该保持一致，但是尝试调用 point.getWorldPosition 会返回“未定义”。我是否在考虑为什么我的结果不一致正确，如果是这样，我是对的，getWorldPosition 是我正在寻找的东西，我该如何调用它，以便我可以获得相交的正确 xyz 坐标？

编辑添加： 当我瞄准屏幕上应该是相同（或接近）的点时，我会得到非常不同的结果。

例如，这是我的模型（请原谅幕后的乱码——我仍在努力）：

http://www.minorworksoflydgate.net/Model/three/examples/clopton_chapel_dev.html

点击对面墙上第一个书写面板的左上角（因此图片中标有 x 的位置）得到这些结果（您可以通过点击 C 在该模型中捕获它们，从指针锁中逃脱, 并在控制台中查看)，相机位于 0,0,0:

x：-0.1947601252025508， y: 0.15833788110908806, z：-0.1643094916216681

如果我在空间中移动（因此相机位置为 x：-6.140427450769398，y：1.9021520960972597e-14，z：-0.30737391540643844）我会在同一位置得到以下结果（如第二张图片所示）：

x：-6.229400824609087， y: 0.20157559303778091, z：-0.5109691487471469

我的理解是，如果这些是相交点的世界坐标，它们应该保持相对相似，但 x 坐标有很大不同。这是有道理的，因为这是相机移动的轴，但它不应该对交点产生影响吗？

【问题讨论】：

您得到的不一致结果是什么？我在相机移动时使用了很多时间光线投射器，没有任何问题。你得到的 point 应该已经在世界坐标中，所以没有必要再次将其转换为世界。
我在原帖中放了一些进一步的解释、一些图片和我当前开发模型的链接。
这条线是否符合您的预期：if (i = intersects.length - 1) {。因为它会将 i 设置为数组中的最后一个元素，这对我来说似乎很奇怪，并最终给你最后一个交叉点，而不是你所期望的第一个最近的交叉点。

标签： three.js

【解决方案1】：

我的评论与相机无关，但我也有关于光线投射器的问题，使用以下方法计算鼠标的位置更准确。

const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
mouse.y = - ((event.clientY - rect.top) / rect.height) * 2 + 1;

【讨论】：

【解决方案2】：

因此，当由于指针锁定而没有可用鼠标时，解决此问题的技巧是使用对象控件创建的光线方向。它实际上很简单，但并不真正存在。

        var ray_direction = new THREE.Vector3();
        var ray = new THREE.Raycaster(); // create once and reuse

        controls.getDirection( ray_direction );
        ray.set( controls.getObject().position, ray_direction );

【讨论】：