如何使用动画功能使我的 FBX 模型旋转？答案

【问题标题】：How can I make my FBX model rotate using animate function?如何使用动画功能使我的 FBX 模型旋转？
【发布时间】：2020-12-07 18:29:11
【问题描述】：

我想使用 three.js 让我的 FBX 模型连续旋转。

所以我尝试了

把我的对象变成变量
在动画函数中调用我的对象进行旋转。 (女孩1)

但我得到了一个错误：

无法读取未定义的属性“旋转”。

我的代码是这样的：

function init() {
    ...

    // zombie girl

    let loader_girl = new FBXLoader();

    loader_girl.load("ZombiePunching.fbx", (object) => {
        // animation mixer
        mixer = new THREE.AnimationMixer(object);

        const action = mixer.clipAction(object.animations[0]);
        action.play();

        // make materials opaque
        object.traverse((child) => {
            if (child.isMesh) {
                child.material.transparent = false;
            }
        });

        object.scale.set(0.05, 0.05, 0.05);
        object.rotation.x = Math.PI;
        scene.add(object);

        girl1 = object;
    });

    ...
    let loader = new THREE.TextureLoader();
    loader.load("smoke.png", function (texture) {
        let cloudGeo = new THREE.PlaneBufferGeometry(500, 500);
        let cloudMaterial = new THREE.MeshLambertMaterial({
            map: texture,
            transparent: true,
        });
        for (let p = 0; p < 25; p++) {
            let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
            cloud.position.set(
                Math.random() * 800 - 400,
                500,
                Math.random() * 500 - 450
            );
            cloud.rotation.x = 1.16;
            cloud.rotation.y = -0.12;
            cloud.rotation.z = Math.random() * 360;
            cloud.material.opacity = 0.6;
            cloudParticles.push(cloud);
            scene.add(cloud);
        }
    });
}

function animate() {
    cloudParticles.forEach((p) => {
        p.rotation.z -= 0.002;
    });

    rainGeo.vertices.forEach((p) => {
        p.velocity -= 0.1 + Math.random() * 0.1;
        p.y += p.velocity;
        if (p.y < -200) {
            p.y = 200;
            p.velocity = 0;
        }
    });
    rainGeo.verticesNeedUpdate = true;
    rain.rotation.y += 0.002;

    girl1.rotation.y += 0.001;

    if (Math.random() > 0.93 || flash.power > 100) {
        if (flash.power < 100)
            flash.position.set(Math.random() * 400, 300 + Math.random() * 200, 100);
        flash.power = 50 + Math.random() * 500;
    }

    requestAnimationFrame(animate);

    renderer.render(scene, camera);
}

init();
animate();

【问题讨论】：

标签： javascript three.js

【解决方案1】：

不要这样做：

girl1.rotation.y += 0.001;

尝试一下：

if ( girl1 ) girl1.rotation.y += 0.001;

由于您开始动画循环在实际加载 FBX 之前，girl1 将在一定时间内变为undefined。

【讨论】：