3D-мир с данными GPS в Javascript и HTML5

Question

Я хотел бы создать трехмерный вращающийся мир в javascript, динамически позиционировать точки из 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 ) );