Javascript 和 html5 中包含 GPS 数据的 3D 世界

Question

我想用 javascript 创建一个 3D 旋转世界，动态定位 json 中的点以显示文本或图片等数据，并随机从一个点旋转到另一个点。

我希望在开始开发之前收到示例和建议。您会使用哪些库？您将使用哪种算法根据 GPS 数据旋转世界？

编辑：再次阅读我的问题，我想我应该说得更清楚。我想做一个类似谷歌地球的东西，但没有变焦功能。地球的 3D 模型上会有点，并且从一个点到另一个点的旋转。

Answer 1

实际上我只是构建了这样的东西，除了 CSS3 和 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 ) );