如何使Json模型在场景中自动旋转

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

本文关键字：旋转 在场 何使 Json 模型      更新时间：2023-09-26

当我使用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轴旋转。

这意味着在我点击窗口之前，网格完全加载到场景中。

然而，我想让网格自动旋转，所以我修改了代码。

第二次尝试

我添加

ballmesh.rotation.y += 0.1;

中的函数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

看起来网格还没有完全加载。

如果我想让网格自动旋转，我该怎么做?

你在这里的挣扎与three.js无关，而是JavaScript提供了一个事件驱动的环境，当部分的代码在现实中执行时，你需要考虑。

在这个特殊的例子中，你发送了一个调用请求一个模型被加载，加上你附加了一个"on completion"事件到那个请求。尽管您在这里注册了它，但该事件处理程序代码只会在模型加载和处理后执行。

请求发送后，主代码继续并开始动画场景。但是那个完成事件还没有被执行(模型还在加载中)，你就会得到undefined变量错误。

在此之后的某个时刻，您的模型将被加载，并且附加到该代码的事件处理程序现在将设置该变量…但是你的动画循环已经因为undefined变量而中断了。

对于您的特定示例，解决这个问题的最简单方法是忽略网格，直到它准备好: 
function animate() {
    if ( ballmesh !== undefined ) {
         ballmesh.rotation.y += 0.1;
    }
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

另一种方法可能是从addJsonToScn事件处理程序开始动画循环，尽管这种基本方法只适用于像这些简单的示例，其中您只想等待单个加载事件。

相关文章：