Three.js anim stop diff
Shows difference in behavior between stopAllActions() and stop().
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>THREE.js Anim stopAll() glitch</title>
<style>
body { margin: 0; }
canvas {
width: 100%;
height: 100%;
}
</style>
<script src="//cdn.rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/dev/examples/js/loaders/GLTFLoader.js"></script>
</head>
<body>
</body>
</html>
JavaScript
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild(renderer.domElement);
camera.position.set(0, 1, -4); // Soldier
//camera.position.set(0, 1, 10); // Robot
camera.lookAt(0, 1, 0);
scene.add(new THREE.AmbientLight(0xFFFFFF));
const clock = new THREE.Clock();
let mixer = null, actionA = null, actionB = null;
const loader = new THREE.GLTFLoader();
loader.load("//cdn.rawgit.com/mrdoob/three.js/dev/examples/models/gltf/Soldier.glb", (glTF) => {
//loader.load("//cdn.rawgit.com/mrdoob/three.js/dev/examples/models/gltf/RobotExpressive/RobotExpressive.glb", (glTF) => {
mixer = new THREE.AnimationMixer(glTF.scene);
for ( const clip of glTF.animations ) {
if ( clip.name == "Idle" ) {
actionA = mixer.clipAction(clip);
} else if ( clip.name == "Walk" ) { // Soldier
// } else if ( clip.name == "Walking" ) { // Robot
actionB = mixer.clipAction(clip);
}
//console.log(clip.name, clip.duration);
}
scene.add(glTF.scene);
requestAnimationFrame(renderFrame);
doActionSequence();
});
function renderFrame() {
requestAnimationFrame(renderFrame);
mixer.update(clock.getDelta());
renderer.render(scene, camera);
}
function doActionSequence() {
mixer.getRoot().visible = true;
actionA.reset().fadeIn(0.25).play();
window.setTimeout(() => {
actionB.reset().crossFadeFrom(actionA, 0.25).play();
window.setTimeout(() => {
mixer.getRoot().visible = false;
// VERSION 1 >>> The default
mixer.stopAllAction();
// VERSION 1 <<<
// VERSION 2 >>> Individual stop() on all AnimationActions.
//actionA.stop();
//actionB.stop();
// VERSION 2
// VERSION 3 >>> Proposed fix.
//for ( let i = 0; i !== mixer._nActiveBindings; ++i )...