我正在导入一个包含三个 js 的模型并且工作正常我想从 gld 文件运行动画我可以用三个 js 获取动画名称但 TJS 不会播放我的动画
我在 glb 文件中有两个动画，名称为“Intro”和“Rotate”我可以用这个命令看到这个动画 console.log(gltf.animations);
但我不能使用这个动画
var mixer = new THREE.AnimationMixer(mesh);
源代码
var scene, renderer;
var camera;
var mesh;
var clickDown;
var model;
var isMouseDown = false;
function execFA() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 25;
camera.position.y = 15;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
renderer.setClearColor(0x00ffff, 1);
renderer.gammaOutput = true;
var light = new THREE.DirectionalLight("#c1582d", 1);
var ambient = new THREE.AmbientLight("#85b2cd");
light.position.set(0, -70, 100).normalize();
scene.add(light);
scene.add(ambient);
var texture = new THREE.Texture();
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total) {};
var onProgress = function(xhr) {};
var onError = function(xhr) {};
var loader = new THREE.GLTFLoader();
// Load a glTF resource
loader.load(
// resource URL
'./models/vc.glbf',
// called when the resource is loaded
function(gltf) {
model = gltf;
mesh = gltf.scene;
mesh.scale.set(3, 3, 3);
var animations = gltf.animations;
//scene.add( gltf.scene );
console.log(gltf.animations);
console.log(gltf.scenes);
var clip = THREE.AnimationClip.findByName(animations, 'Intro');
var mixer = new THREE.AnimationMixer(mesh);
console.log(clip)
// var action = mixer.clipAction(clip);
animations.forEach(animation => {
mixer.clipAction(animation).play();
});
// action.setLoop(THREE.LoopOnce);
animate();
render();
scene.add(mesh);
// action.play();
// action.play();
//gltf.animations; // Array<THREE.AnimationClip>
//gltf.scene; // THREE.Scene
//gltf.scenes; // Array<THREE.Scene>
//gltf.cameras; // Array<THREE.Camera>
//gltf.asset; // Object
},
// called when loading is in progresses
function(xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
// called when loading has errors
function(error) {
console.log('An error happened', error);
}
);
document.addEventListener("mousedown", onMouseDown);
document.addEventListener("touchstart", onMouseDown);
document.addEventListener("mouseup", onMouseUp);
document.addEventListener("touchend", onMouseUp);
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("touchmove", onMouseMove);
render();
}
function animate() {
// render();
requestAnimationFrame(animate);
}
function render() {
if (model) {
requestAnimationFrame(render);
renderer.render(scene, camera);
// mesh.rotation.z += 0.01;
// mesh.rotation.x += 0.01;
// mesh.rotation.y += 0.01;
}
}
function onMouseDown(event) {
isMouseDown = true;
}
function onMouseMove(event) {
if (isMouseDown) {
if (mesh) {
mesh.rotation.y = getMouseX(event) / 50;
mesh.rotation.x = getMouseY(event) / 50;
}
}
}
function onMouseUp(event) {
isMouseDown = false;
}
function getMouseX(event) {
if (event.type.indexOf("touch") == -1)
return event.clientX;
else
return event.touches[0].clientX;
}
function getMouseY(event) {
if (event.type.indexOf("touch") == -1)
return event.clientY;
else
return event.touches[0].clientY;
}
window.addEventListener('DOMContentLoaded', execFA());
最佳答案
有必要在动画循环中更新动画混合器。用更新后的代码试试
var scene, renderer;
var camera;
var mesh;
var clickDown;
var model;
var mixer, clock; // declare variables globally
var isMouseDown = false;
function execFA() {
scene = new THREE.Scene();
clock = new THREE.Clock(); // create clock
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 25;
camera.position.y = 15;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
renderer.setClearColor(0x00ffff, 1);
renderer.gammaOutput = true;
var light = new THREE.DirectionalLight("#c1582d", 1);
var ambient = new THREE.AmbientLight("#85b2cd");
light.position.set(0, -70, 100).normalize();
scene.add(light);
scene.add(ambient);
var texture = new THREE.Texture();
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total) {};
var onProgress = function(xhr) {};
var onError = function(xhr) {};
var loader = new THREE.GLTFLoader();
// Load a glTF resource
loader.load(
// resource URL
'./models/vc.glbf',
// called when the resource is loaded
function(gltf) {
model = gltf;
mesh = gltf.scene;
mesh.scale.set(3, 3, 3);
var animations = gltf.animations;
//scene.add( gltf.scene );
console.log(gltf.animations);
console.log(gltf.scenes);
var clip = THREE.AnimationClip.findByName(animations, 'Intro');
mixer = new THREE.AnimationMixer(mesh); // create mixer
console.log(clip)
// var action = mixer.clipAction(clip);
animations.forEach(animation => {
mixer.clipAction(animation).play();
});
// action.setLoop(THREE.LoopOnce);
animate();
render();
scene.add(mesh);
// action.play();
// action.play();
//gltf.animations; // Array<THREE.AnimationClip>
//gltf.scene; // THREE.Scene
//gltf.scenes; // Array<THREE.Scene>
//gltf.cameras; // Array<THREE.Camera>
//gltf.asset; // Object
},
// called when loading is in progresses
function(xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
// called when loading has errors
function(error) {
console.log('An error happened', error);
}
);
document.addEventListener("mousedown", onMouseDown);
document.addEventListener("touchstart", onMouseDown);
document.addEventListener("mouseup", onMouseUp);
document.addEventListener("touchend", onMouseUp);
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("touchmove", onMouseMove);
render();
}
function animate() {
// render();
requestAnimationFrame(animate);
}
function render() {
if (model) {
requestAnimationFrame(render);
var delta = clock.getDelta();
mixer.update( delta ); // update animation mixer
renderer.render(scene, camera);
// mesh.rotation.z += 0.01;
// mesh.rotation.x += 0.01;
// mesh.rotation.y += 0.01;
}
}
function onMouseDown(event) {
isMouseDown = true;
}
function onMouseMove(event) {
if (isMouseDown) {
if (mesh) {
mesh.rotation.y = getMouseX(event) / 50;
mesh.rotation.x = getMouseY(event) / 50;
}
}
}
function onMouseUp(event) {
isMouseDown = false;
}
function getMouseX(event) {
if (event.type.indexOf("touch") == -1)
return event.clientX;
else
return event.touches[0].clientX;
}
function getMouseY(event) {
if (event.type.indexOf("touch") == -1)
return event.clientY;
else
return event.touches[0].clientY;
}
window.addEventListener('DOMContentLoaded', execFA());
关于javascript - AnimationMixer 不会播放动画(gltf 文件)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58156826/