GLTF影片在三個js中不起作用-有解無憂

我正在努力讓影片與我的 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 設定中播放。有什么線索嗎？對于如何解決該問題的任何幫助或提示，我將不勝感激。

uj5u.com熱心網友回復：

我在這里發現了兩個嚴重錯誤。

在代碼的頂部，您r122使用 GLTFLoader拉入三個r132。這些必須是相同的修訂版。嘗試將它們全部設定為r132.
你getDelta()在這里打了兩次電話：

  let delta = clock.getDelta();

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

第二次呼叫getDelta()緊跟在第一次之后，所以總是回傳零增量時間。因此，影片永遠不會向前移動。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/459082.html

標籤：动画片三.js gltf

上一篇：在本機反應中按下按鈕時將文本向上移動

下一篇：3d懸停效果反向影片