3D World with GPS data in Javascript and html5

Question

I would like to create a 3D rotating world in javascript, dynamically positioning points from a json to display data such as text or pictures, and randomly rotating from a point to another.

I would like to receive examples and suggestions before beginning to develop. Which libraries would you use? Which algorythm would you use to rotate the world accordingly to the gps data?

Edit: Reading again my question I think I should make it more clear. I want to make something like Google Earth, without the zoom. There will be points on a 3d model of the earth, and a rotation from a point to another.

Answer 1

I actually just built something like this, using nothing but CSS3 & JS. Here's the code I wrote for handling the device orientation. The position needs to be smoothed out, but it should help you. It fires events constantly giving the "heading" & "tilt angle". It's tied in to a much larger framework, so you're going to need to pull it out and trigger the events differently, but that's easy to do.

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