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.render函数中的root.animate函数。像这样 -

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中定义它。

Threejs动画对象不起作用

1 个答案: