在WebGL中从全球获得经度和纬度

Question

我正在使用http://workshop.chromeexperiments.com/globe/的WebGL Globe。如果单击地球的任何点，我需要获得该点的经度和纬度。这些参数应传递给2D地图的Google地图。

我怎么能长时间。和拉特。从WebGL Globe？

通过此功能，我得到了双击点，在这一点上，我发现了很长的时间。和拉特。但是结果不正确。似乎点击点未正确确定。

function onDoubleClick(event) {
        event.preventDefault();
        var vector = new THREE.Vector3(
            ( event.clientX / window.innerWidth ) * 2 - 1,
            -( event.clientY / window.innerHeight ) * 2 + 1,
            0.5
        );
        projector.unprojectVector(vector, camera);
        var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
        var intersects = ray.intersectObject(globe3d);
        if (intersects.length > 0) {
            object = intersects[ 0 ];
            console.log(object);
            r = object.object.boundRadius;
            x = object.point.x;
            y = object.point.y;
            z = object.point.z;
            console.log(Math.sqrt(x * x + y * y + z * z));
            lat = 90 - (Math.acos(y / r)) * 180 / Math.PI;
            lon = ((270 + (Math.atan2(x, z)) * 180 / Math.PI) % 360) - 180;
            
            console.log(lat);
            console.log(lon);
        }
    }

在此处获取WebGL globe https://github.com/dataarts/webgl-globe/archive/master.zip您可以在Mozilla上直接打开它，如果您在Chrome中打开它，它与地面图像缺乏，因为交叉原始资源共享策略。它需要放在虚拟主机中。

Answer 1

尝试以这种方式使用该功能

    function onDoubleClick(event) {
        event.preventDefault();
        var canvas = renderer.domElement;
        var vector = new THREE.Vector3( ( (event.offsetX) / canvas.width ) * 2 - 1, - ( (event.offsetY) / canvas.height) * 2 + 1,
0.5 );
        projector.unprojectVector( vector, camera );
        var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
        var intersects = ray.intersectObject(globe3d);
        if (intersects.length > 0) {
            object = intersects[0];
            r = object.object.boundRadius;
            x = object.point.x;
            y = object.point.y;
            z = object.point.z;
            lat = 90 - (Math.acos(y / r)) * 180 / Math.PI;
            lon = ((270 + (Math.atan2(x, z)) * 180 / Math.PI) % 360) - 180;
            lat = Math.round(lat * 100000) / 100000;
            lon = Math.round(lon * 100000) / 100000;
            window.location.href = 'gmaps?lat='+lat+'&lon='+lon;
        }
    }

Answer 2

我使用了您共享的代码，并进行了一些校正，并且效果很好。

让它正常工作的方法是准确地了解您将您传递给新的三。

此功能需要三个参数（x，y，z）

z在我们/您的案件中被雕刻为0.5，还可以

x和y必须在-1和1中是一个数字，为了获得此值，您需要在画布上捕获点击坐标，然后使用此公式，将它们降低到此范围内的值（-1）... 0 ... 1）;

var vectorX = ((p_coord_X / canvas.width ) * 2 - 1);
var vectorY = -((p_coord_Y / canvas.height ) * 2 - 1);

其中p_coord_x和p_coord_y是点击的坐标（转到画布的左上角），而画布是lies webgl globe的画布区域。

问题是如何在像素中获取单击x和y坐标，因为这取决于如何将画布放在HTML环境中。对于我的情况，解决方案是不合适的原因，我始终返回错误的结果；因此，我在单击时构建了一个解决方案，以将画布区域的X和y坐标彻底添加（我也有插入Scrolly Page校正的情况）。

现在想象一下，要在4平方驱动您的画布区域，单击NW象限将返回，例如-0.8，-05 x和y值，单击se中的一个，即0.6，0.4值的几个值。p> ray.intersectobject（）函数的函数使用使用，然后我们的点击矢量转换的数据以了解我们的点击是否与地球相交，如果匹配，请正确返回坐标lat和lon。