2012-11-08 40 views
1

我從http://workshop.chromeexperiments.com/globe/使用WebGL地球儀。如果點擊了地球的任何一點,我需要獲得該點的經度和緯度。這些參數將被傳遞給Google Maps for 2D地圖。從WebGL獲取地球的經度和緯度

我該怎麼做才能長久。和拉特。從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中打開它,因爲跨來源資源共享政策的地球表面圖像缺乏工作。它需要放在虛擬主機中。

+0

但是,這個http://stackoverflow.com/questions/5674149/3d-coordinates-on-a-sphere-to-latitude-and-longitude不正確地處理這個問題。你試過了嗎? – orif

+0

夥計們,請先看看http://workshop.chromeexperiments.com/globe和代碼。 – sandy

回答

3

嘗試使用功能以這種方式

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; 

     } 
    } 
0

我用了你一點點修正共享代碼和它的偉大工程。

讓它正確工作的方法是正確理解你傳遞給新的THREE.Vector3的內容。

此功能需要三個參數(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是點擊(簡稱畫布的左上角)和帆布的座標是畫布區域在那裏住你的WebGL的地球。

問題是如何獲得像素中的單擊X和Y座標,因爲它取決於您的畫布如何放置在您的HTML環境中。 對於我的情況,解決方案建議在哪裏不合適因爲我返回總是虛假的結果;所以我建立了一個解決方案,以獲得我的畫布區域的x和y座標,當我點擊它時(我的案例也插入了scrollY頁面更正)。

現在想象一下,在4平方米畫布區域devide,在西北象限的點擊將返回例如-0.8,-05 x和y的值,在SE即一對夫婦的0.6,0.4的值點擊。

接下來的ray.intersectObject()函數使用我們的點擊向量轉換數據來理解我們的點擊是否與地球相交,如果匹配,則正確返回座標lat和lon。