three.js 渲染带动画的glb模型

废话不多少上代码

 //gltf加载器 
 
    let mixer//添加一个变量来存储动画混合器
    const progressBar = document.getElementById('progress-bar-inner')
    const loader = new THREE.GLTFLoader();
    loader.setPath('./')
    loader.load('./glb/LKBB4385.glb', (gltf) => {
        gltfScene = gltf.scene
        gltfScene.rotation.set(0, 155, 0)
        gltfScene.position.set(0, -3735, 0)
        gltfScene.traverse(function (obj) {
            if (obj.isMesh) {
                // obj.material=Glfmaterial
            }
        })
        //创建动画混合器
        mixer = new THREE.AnimationMixer(gltfScene);
        //所有的动画
        gltf.animations.forEach((clip) => {
            mixer.clipAction(clip).play();
        });

        scene.add(gltf.scene);

然后你需要引入

<script type="text/javascript" src="js/GLTFLoader.js"></script>

找到动画函数

 //循环渲染 
            //添加代码
        let prevTime = performance.now(); ;//添加一个变量来存储之前的时间戳
        function animate() {
            //添加代码
            const currentTime = performance.now()
            //添加代码
            const deltaTime = (currentTime - prevTime) / 1000; // 转换为秒
            //添加代码
            prevTime = currentTime;
            //添加代码
            if (mixer) {
                mixer.update(deltaTime);
            }
            controls.update()

            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }
        animate();