How to make 3D globe animation always begin with same side of sphere facing camera

Question

I think this is really simple question (I'm just learning three.js) and I'm failing to find the right words to search by, but here we go.

I'm working on animated a spinning Earth. I want the Earth to always start its rotation from the same point when the viewer loads the page. Since I'm learning as I go along, I started with a boilerplate from http://jeromeetienne.github.com/threejsboilerplatebuilder/ and have subtracted elements I don't require and tried to add things that I need based on other examples found around the web. The animation works fine other than the initial direction issue. Right now if I reload the animation, the globe position picks up where it was before I hit reload instead of reseting to an initial position. Here's my script: var scene, renderer, composer; var camera, cameraControl; var globe;

    if( !init() )   animate();

    // init the scene
    function init(){

        if( Detector.webgl ){
            renderer = new THREE.WebGLRenderer({
                antialias       : true, // to get smoother output
            });
        }else{
            renderer    = new THREE.CanvasRenderer();
        }
        renderer.setSize( 567,567 );
        document.getElementById('Stage_globe3d').appendChild(renderer.domElement);

        // create a scene
        scene = new THREE.Scene();

        // put a camera in the scene
        var cameraH = 3;
        var cameraW = cameraH / 567 * 567;
        camera  = new THREE.OrthographicCamera( -cameraW/2, +cameraW/2, cameraH/2, -cameraH/2, -10000, 10000 );
        camera.position.set(0, 0, 5);
        scene.add(camera);


        // here you add your objects

        var light   = new THREE.DirectionalLight(0xffffff, 2 );
        light.position.set( 0,0,10 ).normalize();
        scene.add( light );

        var geometry    = new THREE.SphereGeometry( 1.45, 50, 50 );
        var material    = new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture("images/world.jpg")});
        var globe   = new THREE.Mesh( geometry, material ); 
        // tried adding this, but it didn't work
                   //globe.rotation.y = 100;
        scene.add( globe );

    }

    // animation loop
    function animate() {

        // loop on request animation loop
        // - it has to be at the begining of the function
        // - see details at http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
        requestAnimationFrame( animate );

        // do the render
        render();
    }

    // render the scene
    function render() {

        var PIseconds   = Date.now() * Math.PI;


        // animation of all objects
        for( var i = 0; i < scene.objects.length; i ++ ){
            scene.objects[ i ].rotation.y = PIseconds*0.00003 * (i % 2 ? 1 : 1);
        }

        // actually render the scene
        renderer.render( scene, camera );
    }    

I thought it might have to do with the rotation animation being based on the current time (which I got from the boilerplate) but I've seen other examples that do something similar but still always start from the same initial position (Walt Disney head from the three.js examples on github, for example). Could someone tell me what I'm doing wrong and steer me in the right direction?

Thanks.

Answer 1

In your init() routine set

globe.rotation.y = initialValueInRadians;

Then in your render() loop, set

globe.rotation.y += delta;

where delta is defined as a constant, like 0.01 , or as a function of elapsed time.