Блог

Главная - Вопросы по программированию - Как я могу заставить мою модель FBX вращаться с помощью функции animate?

Как я могу заставить мою модель FBX вращаться с помощью функции animate?

#javascript #three.js

#javascript #three.js

Вопрос:

Я хочу, чтобы моя модель FBX вращалась непрерывно, используя three.js .

Итак, я попытался

  1. превратить мой объект в переменную
  2. вызовите мой объект в функции animate для поворота. (girl1)

но я получил сообщение об ошибке:

Не удается прочитать свойство ‘rotation’ undefined.

Мой код выглядит так:

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

Ответ №1:

Вместо того, чтобы делать это:

 girl1.rotation.y  = 0.001;

попробуйте с:

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

Поскольку вы запускаете цикл анимации до фактической загрузки FBX, girl1 это будет undefined продолжаться определенное время.

Метки: