Three.JS如何在场景中为导入的3D对象设置动画?

时间:2017-12-12 19:38:19

标签: three.js

这样做了10个小时左右,仍然无法弄清楚我应该怎样(或者我应该能够)在场景中移动导入的物体。

以下是我的代码示例:

// OBJECT (.obj loader)
var onProgress = function (xhr) {
    if (xhr.lengthComputable) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log(Math.round(percentComplete, 2) + '% downloaded');
    }
};
var onError = function (xhr) { };

THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('./');
mtlLoader.load('object.mtl', function (materials) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('./');
    objLoader.load('object.obj', function (object) {
        object.scale.x = object.scale.y = object.scale.z = 20;
        object.position.set(1100, 0, -600);
        object.castShadow = true;
        object.receiveShadow = true;
        scene.add(object);
    }, onProgress, onError);
});

现在对象在场景中。我可以看一下,没问题,但是当我尝试时:

function animate() {
    requestAnimationFrame(animate);

    object.rotation.x += 0.005;

    renderer.render(scene, camera);
    controls.update();
}

无。根本不值一提。如果我在init()中创建了一个包,我可以在animate()中使用crate.rotation.x += 0.005;将其旋转,没有任何问题,但导入的对象...没有。什么都没发生。它说:

  

SCRIPT5007:无法获取未定义或空引用的属性“轮换”

你能帮忙吗?如何在three.js中为导入的.obj文件设置动画?

1 个答案:

答案 0 :(得分:1)

试试这个,

var model;
var onProgress = function (xhr) {
    if (xhr.lengthComputable) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log(Math.round(percentComplete, 2) + '% downloaded');
    } 
}; 
var onError = function (xhr) { }; 
var mtlLoader = new THREE.MTLLoader(); 
mtlLoader.setPath('./'); 
mtlLoader.load('object.mtl', function (materials) { 
    materials.preload(); 
    var objLoader = new THREE.OBJLoader(); 
    objLoader.setMaterials(materials); 
    objLoader.setPath('./'); 
    objLoader.load('object.obj', function (object) { 
            object.scale.x = object.scale.y = 
        object.scale.z = 20; 
            object.position.set(1100, 0, -600);
            object.castShadow = true; 
            object.receiveShadow = true;
            model = object;
            scene.add(model); 
    }, onProgress, onError); });

然后更改动画功能,

function animate() { 
    requestAnimationFrame( animate ); 
    model.rotation.x += 0.005; 
    renderer.render(scene, camera); 
    controls.update(); 
}

您指的是object功能超出范围的animate。我使用变量model更改了它。