1

これは非常に単純な質問だと思います (私は three.js を学んでいます)。検索する適切な単語を見つけることができませんが、ここに行きます。

回転する地球のアニメーション化に取り組んでいます。閲覧者がページを読み込んだときに、地球が常に同じポイントから回転を開始するようにします。私は進んで学習しているので、http://jeromeetienne.github.com/threejsboilerplatebuilder/の定型文から始めて、必要のない要素を差し引いて、見つかった他の例に基づいて必要なものを追加しようとしましたウェブの周り。アニメーションは、最初の方向の問題以外は正常に機能します。現在、アニメーションをリロードすると、球体の位置は初期位置にリセットされるのではなく、リロードを押す前の位置に戻ります。これが私のスクリプトです: var scene, renderer, composer; 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 fromたとえば、github の three.js の例)。誰かが私が間違っていることを教えて、私を正しい方向に導くことができますか?

ありがとう。

4

1 に答える 1

1

いつものinit()セットで

globe.rotation.y = initialValueInRadians;

次に、render()ループで設定します

globe.rotation.y += delta;

ここで、deltaは のような定数として、または経過0.01時間の関数として定義されます。

于 2012-12-12T20:50:07.647 に答える