如何使Json模型在场景中自动旋转? [英] How to make a Json model auto-rotates in the scene?

问题描述

当我使用mouseevent时，我可以旋转球形.

I can rotate the ballmesh when I use mouseevent.

第一次尝试

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

当我单击窗口时，网格可以沿y轴旋转.

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.

第二次尝试

我添加

ballmesh.rotation.y += 0.1;

在animate()函数中；

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

我收到此错误

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?

推荐答案

您在此处遇到的问题与three.js无关，但是JavaScript提供了一个事件驱动的环境，您需要考虑何时在实际中执行代码段.

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

另一种方法可能是从 addJsonToScn 事件处理程序开始动画循环，尽管该基本方法仅适用于像这样的琐碎示例，而您只想等待一个加载事件.

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.

这篇关于如何使Json模型在场景中自动旋转?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！