Hi, i’m loading a gltf file with 3 animations, but only the last animation is starting. this is my code:
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.143.0/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'https://unpkg.com/three@0.143.0/examples/jsm/loaders/GLTFLoader.js';
//import { OrbitControls } from 'https://unpkg.com/three@0.143.0/examples/jsm/controls/OrbitControls.js';
import { RGBELoader } from 'https://unpkg.com/three@0.143.0/examples/jsm/loaders/RGBELoader.js';
//import Stats from 'three/examples/jsm/libs/stats.module'
var clock = new THREE.Clock();
var camera, scene, renderer, mixer;
function init() {
scene = new THREE.Scene();
const light = new THREE.PointLight( 0xffffff, 50, 150 );
light.position.set( 10, 20, -5 );
light.shadow.camera.top = 2000;
light.shadow.camera.bottom = - 2000;
light.shadow.camera.left = - 2000;
light.shadow.camera.right = 2000;
light.shadow.camera.near = 1;
light.shadow.camera.far = 2000;
light.castShadow = true;
scene.add( light );
camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set(1, 5, -40);
camera.lookAt(new THREE.Vector3(1, 8, 1));
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff );
renderer.physicallyCorrectLights = true;
renderer.shadowMap.enabled = true;
renderer.outputEncoding = THREE.sRGBEncoding
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const loader = new GLTFLoader();
loader.load(
'./soul3d_7.glb',
function (gltf) {
mixer = new THREE.AnimationMixer( gltf.scene );
gltf.animations.forEach( ( clip ) => {
let animation = mixer.clipAction( clip );
animation.setLoop(THREE.LoopOnce);
animation.clampWhenFinished = true;
animation.enable = true;
animation.play();
} );
scene.add(gltf.scene);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.log(error);
}
);
}
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}
function animate() {
requestAnimationFrame(animate);
if (mixer) {
mixer.update(clock.getDelta());
}
render();
}
function render() {
renderer.render(scene, camera);
}
init();
animate();
</script>
Can you please help me?
G