GLTF 动画在三个 js 中不起作用

Question

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

这是我的fiddle：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

我在这里发现了两个严重错误。

在代码的顶部，您使用 GLTFLoader r132 引入了三个 r122。这些需要是相同的修订版。尝试将它们全部设置为 r132.
你在这里调用了两次getDelta():

  let delta = clock.getDelta();

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

第二次调用 getDelta() 紧接在第一次调用之后，因此总是 returns 零增量时间。因此，动画永远不会向前移动。

GLTF 动画在三个 js 中不起作用

GLTF animation is not working in Three js

animation

three.js

gltf