How to make a Json model auto-rotates in the scene?

问题

I can rotate the ballmesh when I use mouseevent.

First try

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('models/ball.json', addJsonToScn);

function addJsonToScn(geometry) {
        var ball = new THREE.BufferGeometry().fromGeometry(geometry);
        var mtl = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
        ballmesh = new THREE.Line(ball, mtl);
        scene.add(ballmesh);
    }

document.addEventListener('click', rotateMesh, false);

function rotateMesh() {
    ballmesh.rotation.y += 0.1;
}


function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

When I click window, the mesh can rotate along y-axis.

That means before I click window, the mesh is loaded into the scene completely.

However, I want to let the mesh auto-rotating, so I modified the code.

Second try

I add

ballmesh.rotation.y += 0.1;

in the function animate();

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('models/ball.json', addJsonToScn);

function addJsonToScn(geometry) {
        var ball = new THREE.BufferGeometry().fromGeometry(geometry);
        var mtl = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
        ballmesh = new THREE.Line(ball, mtl);
        scene.add(ballmesh);
    }

document.addEventListener('click', rotateMesh, false);

function rotateMesh() {
    ballmesh.rotation.y += 0.1;
}


function animate() {
    ballmesh.rotation.y += 0.1;
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

I got this error

TypeError: ballmesh is undefined

It looks like the mesh does not loaded completely yet.

If I want the mesh auto-rotating, how shoule I do?

回答1:

What you're struggling here has nothing to do with three.js, but the fact that JavaScript provides an event-driven environment, and you need to consider when sections of code are executed in reality.

In this particular example, you're sending a call out to request that a model is loaded, plus you attach an "on completion" event to that request. Even though you register it here, that event handler code which will only be executed after the model is loaded and processed.

Right after that request is sent your main code continues and starts animating the scene. But that completion event hasn't been executed yet (the model is still loading), and you get that undefined variable error.

At some point after that, your model will be loaded, and the event handler attached to that code will now set that variable ... but your animation loop has already broken because of the undefined variable.

The most trivial way to work around the problem for your particular example is to ignore the mesh until it is ready:

function animate() {
    if ( ballmesh !== undefined ) {
         ballmesh.rotation.y += 0.1;
    }
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

Another way might be to start your animation loop from the addJsonToScn event handler, though that basic approach will only work well for trivial examples like these where you only want to wait on a single load event.

来源：https://stackoverflow.com/questions/39057432/how-to-make-a-json-model-auto-rotates-in-the-scene

标签

javascript

function

three.js