javascript - Javascript 和 html5 中带有 GPS 数据的 3D 世界

Question

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

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

编辑:再次阅读我的问题我想我应该说得更清楚。我想制作类似 Google Earth 的东西，但没有缩放功能。地球的 3d 模型上会有点，以及从一个点到另一个点的旋转。

Answer 1

我实际上只是构建了这样的东西，只使用 CSS3 和 JS。这是我为处理设备方向而编写的代码。位置需要磨平，但应该对你有帮助。它不断触发事件，给出“航向”和“倾斜 Angular ”。它绑定(bind)到一个更大的框架，因此您需要将其拉出并以不同方式触发事件，但这很容易做到。

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