Three.js GLB 骨骼动画无法在 Chrome 中播放答案

【问题标题】：Three.js GLB Skeletal Animation not playing in ChromeThree.js GLB 骨骼动画无法在 Chrome 中播放
【发布时间】：2021-10-28 23:50:33
【问题描述】：

我正在尝试使用 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);
        }

我错过了什么？

【问题讨论】：

标签： javascript three.js

【解决方案1】：

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

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

    const delta = clock.getDelta();

    if (mixer) mixer.update(delta);

    requestAnimationFrame(render);
}

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

【讨论】：