AnimationMixer 不会播放动画（gltf 文件）

Question

我正在导入一个包含三个 js 的模型并且工作正常我想从 gld 文件运行动画我可以使用三个 js 获取动画名称但 TJS 不会播放我的动画

GLB FILE

我在 glb 文件中有两个动画，名称分别为“Intro”和“Rotate”，我可以用这个命令看到这个动画console.log(gltf.animations); 但我不能使用这个动画 var mixer = new THREE.AnimationMixer(mesh);

源代码

var scene, renderer;
var camera;
var mesh;
var clickDown;
var model;

var isMouseDown = false;

function execFA() {


    scene = new THREE.Scene();


    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 25;
    camera.position.y = 15;


    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('container').appendChild(renderer.domElement);

    renderer.setClearColor(0x00ffff, 1);
    renderer.gammaOutput = true;


    var light = new THREE.DirectionalLight("#c1582d", 1);
    var ambient = new THREE.AmbientLight("#85b2cd");
    light.position.set(0, -70, 100).normalize();
    scene.add(light);
    scene.add(ambient);

    var texture = new THREE.Texture();
    var manager = new THREE.LoadingManager();
    manager.onProgress = function(item, loaded, total) {};
    var onProgress = function(xhr) {};
    var onError = function(xhr) {};


    var loader = new THREE.GLTFLoader();

    // Load a glTF resource
    loader.load(
        // resource URL
        './models/vc.glbf',
        // called when the resource is loaded
        function(gltf) {
            model = gltf;
            mesh = gltf.scene;
            mesh.scale.set(3, 3, 3);
            var animations = gltf.animations;


            //scene.add( gltf.scene );
            console.log(gltf.animations);
            console.log(gltf.scenes);
            var clip = THREE.AnimationClip.findByName(animations, 'Intro');
            var mixer = new THREE.AnimationMixer(mesh);
            console.log(clip)
                // var action = mixer.clipAction(clip);

            animations.forEach(animation => {

                mixer.clipAction(animation).play();

            });
            // action.setLoop(THREE.LoopOnce);
            animate();
            render();


            scene.add(mesh);
            // action.play();

            // action.play();

            //gltf.animations; // Array<THREE.AnimationClip>
            //gltf.scene; // THREE.Scene
            //gltf.scenes; // Array<THREE.Scene>
            //gltf.cameras; // Array<THREE.Camera>
            //gltf.asset; // Object

        },
        // called when loading is in progresses
        function(xhr) {

            console.log((xhr.loaded / xhr.total * 100) + '% loaded');

        },
        // called when loading has errors
        function(error) {

            console.log('An error happened', error);

        }
    );

    document.addEventListener("mousedown", onMouseDown);
    document.addEventListener("touchstart", onMouseDown);
    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("touchend", onMouseUp);
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("touchmove", onMouseMove);

    render();
}

function animate() {
    // render();

    requestAnimationFrame(animate);
}

function render() {
    if (model) {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
        // mesh.rotation.z += 0.01;
        // mesh.rotation.x += 0.01;
        // mesh.rotation.y += 0.01;

    }

}






function onMouseDown(event) {
    isMouseDown = true;
}


function onMouseMove(event) {
    if (isMouseDown) {
        if (mesh) {
            mesh.rotation.y = getMouseX(event) / 50;
            mesh.rotation.x = getMouseY(event) / 50;

        }
    }
}


function onMouseUp(event) {
    isMouseDown = false;
}

function getMouseX(event) {
    if (event.type.indexOf("touch") == -1)
        return event.clientX;
    else
        return event.touches[0].clientX;
}


function getMouseY(event) {
    if (event.type.indexOf("touch") == -1)
        return event.clientY;
    else
        return event.touches[0].clientY;
}

window.addEventListener('DOMContentLoaded', execFA());

Answer 1

需要在动画循环中更新动画混合器。试试这个更新的代码

var scene, renderer;
var camera;
var mesh;
var clickDown;
var model;

var mixer, clock; // declare variables globally

var isMouseDown = false;

function execFA() {


    scene = new THREE.Scene();

    clock = new THREE.Clock(); // create clock


    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 25;
    camera.position.y = 15;


    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('container').appendChild(renderer.domElement);

    renderer.setClearColor(0x00ffff, 1);
    renderer.gammaOutput = true;


    var light = new THREE.DirectionalLight("#c1582d", 1);
    var ambient = new THREE.AmbientLight("#85b2cd");
    light.position.set(0, -70, 100).normalize();
    scene.add(light);
    scene.add(ambient);

    var texture = new THREE.Texture();
    var manager = new THREE.LoadingManager();
    manager.onProgress = function(item, loaded, total) {};
    var onProgress = function(xhr) {};
    var onError = function(xhr) {};


    var loader = new THREE.GLTFLoader();

    // Load a glTF resource
    loader.load(
        // resource URL
        './models/vc.glbf',
        // called when the resource is loaded
        function(gltf) {
            model = gltf;
            mesh = gltf.scene;
            mesh.scale.set(3, 3, 3);
            var animations = gltf.animations;


            //scene.add( gltf.scene );
            console.log(gltf.animations);
            console.log(gltf.scenes);
            var clip = THREE.AnimationClip.findByName(animations, 'Intro');
            mixer = new THREE.AnimationMixer(mesh); // create mixer
            console.log(clip)
                // var action = mixer.clipAction(clip);

            animations.forEach(animation => {

                mixer.clipAction(animation).play();

            });
            // action.setLoop(THREE.LoopOnce);
            animate();
            render();


            scene.add(mesh);
            // action.play();

            // action.play();

            //gltf.animations; // Array<THREE.AnimationClip>
            //gltf.scene; // THREE.Scene
            //gltf.scenes; // Array<THREE.Scene>
            //gltf.cameras; // Array<THREE.Camera>
            //gltf.asset; // Object

        },
        // called when loading is in progresses
        function(xhr) {

            console.log((xhr.loaded / xhr.total * 100) + '% loaded');

        },
        // called when loading has errors
        function(error) {

            console.log('An error happened', error);

        }
    );

    document.addEventListener("mousedown", onMouseDown);
    document.addEventListener("touchstart", onMouseDown);
    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("touchend", onMouseUp);
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("touchmove", onMouseMove);

    render();
}

function animate() {
    // render();

    requestAnimationFrame(animate);
}

function render() {
    if (model) {
        requestAnimationFrame(render);
        var delta = clock.getDelta();
        mixer.update( delta ); // update animation mixer
        renderer.render(scene, camera);
        // mesh.rotation.z += 0.01;
        // mesh.rotation.x += 0.01;
        // mesh.rotation.y += 0.01;

    }

}






function onMouseDown(event) {
    isMouseDown = true;
}


function onMouseMove(event) {
    if (isMouseDown) {
        if (mesh) {
            mesh.rotation.y = getMouseX(event) / 50;
            mesh.rotation.x = getMouseY(event) / 50;

        }
    }
}


function onMouseUp(event) {
    isMouseDown = false;
}

function getMouseX(event) {
    if (event.type.indexOf("touch") == -1)
        return event.clientX;
    else
        return event.touches[0].clientX;
}


function getMouseY(event) {
    if (event.type.indexOf("touch") == -1)
        return event.clientY;
    else
        return event.touches[0].clientY;
}

window.addEventListener('DOMContentLoaded', execFA());