在WebGL中获取Globe中的经度和纬度 [英] Get longitude and latitude from the Globe in WebGL

问题描述

我从 http://workshop.chromeexperiments.com/globe/ 使用WebGL球体。如果点击了地球的任何一点，我需要获得该点的经度和纬度。这些参数将被传递给Google Maps for 2D地图。

我怎样才能获得长久。和拉特。来自webgl globe？

通过这个函数，我得到了双击点，并且通过这一点我发现了很长时间。和拉特。但结果不正确。看起来点击点不正确。

 函数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; （270+（Math.atan2（x，z））* 180 / Math.PI）％360） -  180; 
 
 console.log（lat）; 
 console.log（lon）; 
 
 
 $ b  

在这里获取WebGL Globe
您可以直接在Mozilla上打开它，如果您在Chrome中打开它，由于跨源资源共享策略，它可以处理地球表面图像缺失。它需要放在一个虚拟主机中。

解决方案

尝试以这种方式使用函数

  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; （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; 
 
} 
} 
  

I'm using WebGL globe from http://workshop.chromeexperiments.com/globe/. If any point of the globe is clicked, I need to get the longitude and latitude of that point. These parameters are to be passed to the Google Maps for 2D map.

How can I get the long. and lat. from the webgl globe?

Through this function I'm getting the double clicked point, and through this point I'm finding the long. and lat. But the results are not correct. It seems that the clicked point is not determined properly.

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);

        }
    }

Get the WebGL Globe here https://dl.dropbox.com/u/48682822/globe.zip You can open it directly on Mozilla, if you open it in Chrome it works with earth surface image lack because of Cross-Origin Resource Sharing policy. It needs to be put in a virtual host.

解决方案

Try to use the function in this way

    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;

        }
    }

这篇关于在WebGL中获取Globe中的经度和纬度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！