获取经度和纬度来自世界各地的WebGL中(Get longitude and latitude fr

我使用的是从全球的WebGL http://workshop.chromeexperiments.com/globe/ 。 如果点击地球上任何地点，我需要得到该点的经度和纬度。 这些参数将被传递到谷歌地图的二维地图。

我怎样才能长。 和纬度。 从全球的WebGL？

通过这个功能，我发现了双次点击点，并通过这一点上，我发现长。 和纬度。 但结果是不正确的。 看来，点击点不恰当地确定。

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的地球在这里https://dl.dropbox.com/u/48682822/globe.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:

我用了你一点点修正共享代码和它的伟大工程。

要让它正常工作的方法是准确地了解你传递给新THREE.Vector3什么。

此功能需要三个参数（X，Y，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是点击的坐标（简称画布的左上角）和帆布是帆布区地方住你的WebGL的地球。

问题是如何获得的点击X和Y坐标的像素，因为它取决于你的画布是如何放置在你的HTML环境。 对于我的情况的解决方案在这里提出的不适合，因为我总是返回错误的结果; 所以我建立一个解决方案，使extacly x和我的画布区域的Y坐标我就可以点击（我有我的情况太插入scrollY页校正）。

现在想象一下，在4平方米画布区域devide，在西北象限的点击将返回例如-0.8，-05 x和y的值，在SE点击即一对夫妇的0.6，0.4的值。

然后下面的ray.intersectObject（）函数使用我们的点击向量转换的数据来理解，如果我们的点击相交全球，如果匹配，返回正确的坐标纬度和经度。

文章来源: Get longitude and latitude from the Globe in WebGL