Question

当我使用mouseevent时，我可以旋转球形网格。

首先尝试

let timestamp = (NSDate().timeIntervalSince1970)
let date = NSDate(timeIntervalSinceReferenceDate: (timestamp))

print(NSDate())   // 2016-08-20 18:24:17 +0000
print(timestamp) //  1471717652.15506
print(date)     //   2047-08-21 18:24:17 +0000

单击窗口时，网格可以沿y轴旋转。

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

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

第二次尝试

我添加

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

函数animate（）中的

;

ballmesh.rotation.y += 0.1;

我收到了这个错误

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

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

如果我想让网格自动旋转，我会怎么做？

Answer 1

你在这里苦苦挣扎与three.js无关，但JavaScript提供了一个事件驱动的环境，你需要考虑何时执行部分代码实际上。

在这个特定的示例中，您发送了一个呼叫以请求加载模型，并在完成时附加＆＃34;＆＃34;该请求的事件。即使您在此处注册，该事件处理程序代码也只会在加载和处理模型后执行。

在发出请求后，您的主代码会继续并开始为场景设置动画。但是那个完成事件还没有被执行（模型仍在加载），你得到了未定义的变量错误。

在此之后的某个时刻，您的模型将被加载，并且附加到该代码的事件处理程序现在将设置该变量......但由于未定义的变量，您的动画循环已经破坏。

解决特定示例问题的最简单方法是在网格准备就绪之前忽略网格：

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

另一种方法可能是从addJsonToScn事件处理程序启动动画循环，尽管这种基本方法只适用于那些只需要等待单个加载事件的简单示例。

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

1 个答案: