3D世界のGPSデータをJavascriptとhtml5で表示

Question

私はJavaScriptで3D回転世界を作成し、テキストや画像などのデータを表示し、ポイントから別の場所にランダムに回転するようにjsonのポイントを動的に配置したいと考えています。

開発を開始する前に、例と提案を受けたいと思います。どのライブラリを使用しますか？世界をgpsデータに応じて回転させるには、どんな忠誠心がありますか？

編集：もう一度私の質問を読む私はそれをもっと明確にすべきだと思います。 Google Earthのようなものをズームしないで作ってみたい。地球の3Dモデル上にポイントがあり、あるポイントから別のポイントへの回転があります。

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