Three.js GLB 骨骼动画未在 Chrome 中播放

Question

我正在尝试使用 Three.js

在 .glb 模型中播放基本的嵌入式骨骼动画

我使用的解决方案来自这个论坛：https://discourse.threejs.org/t/easiest-way-to-play-skeletal-animation-from-gltf/7792

我使用的是非常基本的代码。找到动画（我可以将其登录到控制台）。但是动画不播放。


    let file, scale, backgroundColor;

    window.onload = loader;

    function loader (){
        file =  "Fox.glb";
        scale = 1;
        backgroundColor = 0x000000;

        init();
    }

    function init(){
        //RENDERER
        myCanvas = document.getElementById('myCanvas');

        renderer = new THREE.WebGLRenderer({
            canvas: myCanvas,
            antialias: true
        });
        renderer.setClearColor(backgroundColor);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        //CAMERA
        camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000 );

        //SCENE
        scene = new THREE.Scene();

        let controls = new THREE.OrbitControls(camera, renderer.domElement);
        camera.position.set( 0, 20, 100 );
        controls.update();

        //LIGHTS
        let light = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(light);

        let light2 = new THREE.PointLight(0xffffff, 0.5);
        scene.add(light2);

        let loader = new THREE.GLTFLoader();

        loader.load(file, handle_load);

        let mesh;

        function handle_load(gltf) {
            mesh = gltf.scene;
            
            //ANIMATION
            let mixer = new THREE.AnimationMixer( gltf.scene );
            let action = mixer.clipAction( gltf.animations[ 0 ] );
            action.play();
   
            //PREPARING DISPLAY
            mesh.children[0].material = new THREE.MeshLambertMaterial();
            mesh.children[0].scale.set(1,1,1,)
            scene.add( mesh );
            mesh.position.z = -10;
        }
        render();

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }

我错过了什么？

Answer 1

您没有更新动画循环中的动画混合器。像这样编写 render() 函数：

function render() {
    renderer.render(scene, camera);

    const delta = clock.getDelta();

    if (mixer) mixer.update(delta);

    requestAnimationFrame(render);
}

clock 变量是 THREE.Clock 的实例。您必须在与渲染器、相机和场景相同的范围内定义它（和您的动画混合器）。

Three.js GLB 骨骼动画未在 Chrome 中播放

Three.js GLB Skeletal Animation not playing in Chrome

javascript

three.js