使用Javascript和html5的GPS數據的3D世界

Question

我想在javascript中創建3D旋轉世界，從json動態定位點以顯示數據（如文本或圖片），並隨機從一個點旋轉到另一個點。

我想在開始開發之前收到示例和建議。你會使用哪些圖書館？你將使用哪一個algorythm來將世界相應地轉換爲GPS數據？

編輯：再次讀我的問題我想我應該更清楚。我想製作像Google地球一樣的東西，而不用縮放。在地球的三維模型上會有點，並且會從一個點轉到另一個點。

Answer 1

我實際上只是建立了這樣的東西，除了CSS3 & JS。以下是我爲處理設備方向而編寫的代碼。該位置需要平滑，但它應該可以幫助你。它不斷髮出「標題」&「傾斜角度」的事件。它綁定到一個更大的框架中，所以你需要把它拉出來並以不同的方式觸發事件，但這很容易做到。

(function($){ 
    // interface to the compass that gets normalized 
    $.Klass.add('HTML5.Orientation', $.Klass.Observable, { 
     init : function(config){ 
      this._super(); 

      $(window).bind('deviceorientation', this.bindMethod('orientationChange')); 
      this.degrees = 0; 
      this.config = config; 
     } 

     , orientationChange : function(ev){ 
      /** 
      * beta = angle that top of device is pointing 
      * gamma = angle that side of device is pointing 
      * 
      * In portrait only: if gamma closer to 0, pointing back. If closer to +- 180, pointing forward 
      **/ 
      var  oEv = ev.originalEvent 
       , heading = oEv.webkitCompassHeading - (this.config.zeroDeg || 0) 
       , beta = oEv.beta 
       , gamma = oEv.gamma 
       , orient = window.orientation 
       , aOrient = window.orientation % 180 
       , angle = (aOrient ? gamma : beta); 

      // ignore bad data 
      if(oEv.webkitCompassAccuracy == -1){ this.trigger('bad-compass'); return; } 
//   if(oEv.webkitCompassAccuracy >= 30){ this.trigger('inaccurate-compass'); return; } 

      // I think this means it's warming up :) 
      if(oEv.webkitCompassAccuracy == 0 ){ return; } 

      // normalize left or bottom being up 
      if((90 === orient) || (180 === orient)){ 
       angle = -angle; 
      } 

      // if in portrait and leaning forward, flip the angle around 90deg 
      if(!aOrient){ 
       if(Math.abs(gamma) > 90){ 
        angle = 180 - angle; 
       } 
      } 

      // normalize compass fliping from 0-->359 or visa-versa 
      if(this.lastHeading && (Math.abs(heading - this.lastHeading) > 180)){ 
       this.lastHeading = 360-this.lastHeading; 
      } 

      if(!this.heading){ this.heading = heading; } 

      this.trigger('heading', this.heading = this.heading + heading - this.lastHeading); 
      this.trigger('angle', this.angle = angle); 

      this.lastHeading = heading; 
     } 
    }); 
}(jQuery));