[英]How to make 3D globe animation always begin with same side of sphere facing camera
我認為這是一個非常簡單的問題(我只是在學習three.js),而且我沒有找到正確的詞來搜索,但是這里就開始了。
我正在為旋轉的地球制作動畫。 我希望地球始終在查看器加載頁面時從同一點開始旋轉。 由於我在學習時一直在學習,因此我從http://jeromeetienne.github.com/threejsboilerplatebuilder/中獲得了樣板,並減去了不需要的元素,並根據發現的其他示例嘗試添加所需的內容在網絡上。 除了初始方向問題外,動畫效果還不錯。 現在,如果我重新加載動畫,則地球位置會恢復到我單擊重新加載之前的位置,而不是重置為初始位置。 這是我的腳本: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示例)。 有人可以告訴我我做錯了什么,並引導我朝正確的方向前進嗎?
謝謝。
在您的init()
例程集中
globe.rotation.y = initialValueInRadians;
然后在您的render()
循環中,設置
globe.rotation.y += delta;
其中delta
定義為常數,例如0.01
,或作為經過時間的函數。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.