javascript - Threejs 动画对象不起作用

Question

我开始学习使用 Threejs 创建旋转 3D 立方体。我关注了this教程，但为对象的旋转设置动画不起作用。

在此之前，我收到旋转未定义的错误。我在 animate() 中使用以下代码解决了这个问题:

var manager = new THREE.LoadingManager();
manager.onLoad = function() {
    root.render();
    requestAnimationFrame( root.animate );
}

只是现在什么也没发生。我也没有收到任何错误。有谁知道缺少什么或我做错了什么？

App.cubeController = {

    camera: null, 
    scene: null, 
    renderer: null,
    mesh: null, 

    // Setup for render
    init: function(){

        // Development
        console.log('init cubeController');

        // Declare variables
        var root = this;

        root.scene = new THREE.Scene(); // Setting up the scene
        root.camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000); // Set dimensions of the stage

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

        var geometry = new THREE.CubeGeometry(10, 10, 10); // Create the object
        var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );

        root.mesh = new THREE.Mesh(geometry, material);
        root.mesh.position.z = -50
        root.scene.add( root.mesh );

        root.renderer = new THREE.WebGLRenderer();
        root.renderer.setSize( window.innerWidth, window.innerHeight );
        $('body').append( root.renderer.domElement );

        window.addEventListener( 'resize', root.onWindowResize, false );


        root.render();
        root.animate();

    }, 

    // Update the state of each object in the scene
    animate: function() {

        // Development
        console.log("init Animate");

        var root = this;

        root.mesh.rotation.x += .05;
        root.mesh.rotation.y += .05;

        var manager = new THREE.LoadingManager();
        manager.onLoad = function() {
            root.render();
            requestAnimationFrame( root.animate );
        }



    }, 

    // Render the result
    render: function() {

        // Development
        console.log("init Render");

        var root = this;
        root.renderer.render( root.scene, root.camera );

    }, 

    // OnResize change camera aspect
    onWindowResize: function() {

        var root = this;

        root.camera.aspect = window.innerWidth / window.innerHeight;
        root.camera.updateProjectionMatrix();
        root.renderer.setSize( window.innerWidth, window.innerHeight );
        root.render();

    }

}

Answer 1

每个动画完成后，您必须调用root.render函数。因此，请在 root.animate 函数中调用 root.render 函数。像这样 -

var root = this;

    animate: function() {

            // Development
            console.log("init Animate");

            requestAnimationFrame( root.animate );

            root.mesh.rotation.x += .05;
            root.mesh.rotation.y += .05;
            root.render();
        }, 

另外，我不知道为什么你需要LoadingManager。我认为它不应该用在会被重复调用的animate函数中。

编辑:您必须在函数外部定义root变量。您已在每个函数中定义了此变量。相反，您必须在 CubeController 中定义它。