2012-12-12 62 views
1

我認爲這是非常簡單的問題(我只是在學習three.js),而且我找不到合適的單詞進行搜索,但開始了。如何讓3D地球動畫始終從面向相機的球體的相同側面開始

我正在動畫一個旋轉的地球。當觀看者加載頁面時,我希望地球始終從同一點開始旋轉。由於我一直在學習,所以我開始使用http://jeromeetienne.github.com/threejsboilerplatebuilder/的樣板文件,並減去了我不需要的元素,並嘗試根據Web上發現的其他示例添加我需要的內容。除了最初的方向問題之外,動畫還可以正常工作。現在,如果我重新加載動畫,地球位置會在我重新加載而不是重新設置到初始位置之前回到原來的位置。這是我的腳本: 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); 
    }  

我想這可能與旋轉動畫是基於當前時間(這是我從樣板了),但我已經看到了做類似的,但仍然什麼其他例子做總是從同一個開始初始位置(例如,來自github上three.js例子的沃爾特迪士尼頭)。有人能告訴我我做錯了什麼,並引導我走向正確的方向嗎?

謝謝。

回答

1

在你init()常規設置

globe.rotation.y = initialValueInRadians; 

然後在您render()環,設置

globe.rotation.y += delta; 

其中delta被定義爲一個常數,等0.01,或作爲函數經過時間。