GLTF动画在Three js中不起作用

Question

我正在努力让一个动画与我的GLTF 3D模型一起播放。我在Stack Overflow上看到的大多数类似问题都与混合器没有更新有关。这不是我的问题。

这是我的小提琴：https://jsfiddle.net/rixi/djqz1nb5/11/

import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js";
import { GLTFLoader } from "https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js";

let clock, controls, scene, camera, renderer, mixer, container, model;

initScene();
animate();
function initScene() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
clock = new THREE.Clock();
renderer = new THREE.WebGLRenderer();
controls = new OrbitControls(camera, renderer.domElement);
controls.update();
container = document.getElementById("container");
container.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);
}
scene.background = new THREE.Color("#f8edeb");
// LIGHT
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 5);
//HELPERS 
const axesHelper = new THREE.AxesHelper(5);
let gridHelper = new THREE.GridHelper(30, 30);
scene.add(light, axesHelper, gridHelper);
//GLTF START
const GLTFloader = new GLTFLoader();
GLTFloader.load("https://richardlundquist.github.io/library/alice_TEST2.glb", function (gltf) {
model = gltf;
mixer = new THREE.AnimationMixer(gltf.scene);
mixer.clipAction(gltf.animations[0]).play(); 

scene.add(model.scene);
});

camera.position.set(0, 20, 50);

function animate() {
requestAnimationFrame(animate);
let delta = clock.getDelta();
if (mixer) {
mixer.update(clock.getDelta());
}
renderer.render(scene, camera);

}

控制台中没有错误。动画列在数组中，并在Don McCurdy的GLTF查看器中按应有的方式播放(https://gltf-viewer.donmccurdy.com/)

但由于某种原因，它不会在我的三个js设置中播放。有线索吗？如果能就如何解决这个问题提供任何帮助或暗示，我将不胜感激。

Answer 1

我在这里发现了两个关键错误。

1. 在代码的顶部，使用GLTFLoaderr132输入Threer122。这些需要是相同的修订版。尝试将它们全部设置为r132。

2. 你在这里打两次getDelta()：

let delta = clock.getDelta();
if (mixer) {
mixer.update(clock.getDelta());
}

对getDelta()的第二个调用紧跟在第一个调用之后，因此总是返回零delta时间。因此，动画永远不会向前移动。