如何使 3D 地球动画始终从面向相机的球体的同一侧开始答案

【问题标题】：How to make 3D globe animation always begin with same side of sphere facing camera如何使 3D 地球动画始终从面向相机的球体的同一侧开始
【发布时间】：2012-11-30 13:57:02
【问题描述】：

我认为这是一个非常简单的问题（我只是在学习three.js），我找不到合适的词来搜索，但我们开始吧。

我正在制作旋转地球的动画。当查看器加载页面时，我希望地球始终从同一点开始旋转。由于我边走边学，我从http://jeromeetienne.github.com/threejsboilerplatebuilder/ 的样板开始，并减去了我不需要的元素，并尝试根据网络上的其他示例添加我需要的东西。除了初始方向问题之外，动画效果很好。现在，如果我重新加载动画，地球位置会恢复到我点击重新加载之前的位置，而不是重置到初始位置。这是我的脚本： var 场景、渲染器、作曲家； var 相机，cameraControl； var 地球；

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

我认为这可能与基于当前时间的旋转动画（我从样板文件中获得）有关，但我看到其他示例执行类似的操作但仍然始终从相同的初始位置开始（Walt Disney head 来自 github 上的 three.js 示例，例如）。有人可以告诉我我做错了什么并引导我朝着正确的方向前进吗？

谢谢。

【问题讨论】：

标签： javascript animation rotation textures three.js

【解决方案1】：

在您的init() 例程集中

globe.rotation.y = initialValueInRadians;

然后在你的 render() 循环中，设置

globe.rotation.y += delta;

其中delta 定义为常量，如0.01，或定义为经过时间的函数。

【讨论】：