GLTF动画在三个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. 在代码顶部，您使用 GLTFLoader r132 拉入三个 r122。这些需要是相同的修订版。尝试将它们全部设置为r132。

2. 您在这里调用 getDelta() 两次：

  let delta = clock.getDelta();

  if (mixer) {
    mixer.update(clock.getDelta());
  }

对 getDelta() 的第二次调用紧随第一次调用之后，因此始终返回零增量时间。因此，动画永远不会向前推进。