mixer.clipAction.play doesn't seem to work

Questions
1

Hello guys, I’m new with using three.js. I’m trying to load my character and plays its animation, everything seems to work fine but mixer.clipAction(myanimations[index]).play(); are not playing.

var model;
var action1;
var action2;
var action3;
var action4;
var action5;
var myanimations = new Array(5);


var loader = new THREE.GLTFLoader();
loader.load('3D/model/model.glb', function (gltf) {

    model = gltf.scene;


    scene.add(model);


    mixer = new THREE.AnimationMixer(model);
    myanimations = gltf.animations;
    console.log(myanimations);


    // get all the animations

    //first animation
    action1 = mixer.clipAction(myanimations[0]);

    //second animation
    action2 = mixer.clipAction(myanimations[1]);

    //third animation
    action3 = mixer.clipAction(myanimations[2]);

    //fourth animation
    action4 = mixer.clipAction(myanimations[3]);


    //fifth animation
    action5 = mixer.clipAction(myanimations[4]);

});

document.addEventListener("keydown", onDocumentKeyDown, false);
function onDocumentKeyDown(event) {
    var keyCode = event.which;
    if (keyCode == 87) {
        action1.play();
        console.log(myanimations[0].name);
        
    } else if (keyCode == 83) {
        action2.play();
        console.log(myanimations[1].name);
    } else if (keyCode == 65) {
        action3.play();
    } else if (keyCode == 68) {
        action4.play();
        console.log(myanimations[3].name);
    } else if (keyCode == 32) {
        action5.play();
        console.log(myanimations[4].name);
    }
};

the scene is loaded from another script and here is my html script tags

<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src="js/AnimationMixer.js"></script>
<script src="js/sceneloader.js"></script>
<script src="js/modelcontroller.js"></script>

What can be wrong ? Thank you in advance guys.

2

This seems not correct. AnimationMixer is part of the core so there is no need to include it separately.

Apart from that, are you actually updating the mixer in the animation loop? The typical code for this looks like so:

3

thanks for the fast reply, where should i initiate the stats and clock ?, i did it that way clock = new THREE.Clock(); and for the stats stats = new Stats(); container.appendChild( stats.dom ); but there is an error in the console that says Stats is not defined even add the script tag .

4

You normally doing this in your init() routine.

Adding stats.js is actually not necessary to solve your issue. Try to use the version from here.

6

es i included the library what you mentioned and still the same error

here is the full script

var action1;
var action2;
var action3;
var action4;
var action5;
var myanimations = new Array(5);
var mixer;

** // Load 3D Scene**
** var scene = new THREE.Scene();**

** // Load Camera Perspektive**
** var camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 20000);**
** camera.position.set(1, 1, 20);**

** // Load a Renderer**
** var renderer = new THREE.WebGLRenderer({ alpha: false });**
** renderer.setClearColor(0x000000);**
** renderer.setPixelRatio(window.devicePixelRatio);**
** renderer.setSize(window.innerWidth, window.innerHeight);**
** document.body.appendChild(renderer.domElement);**

** // Load the Orbitcontroller**
** var controls = new THREE.OrbitControls(camera, renderer.domElement);**

** // Load Light**
** var ambientLight = new THREE.AmbientLight(0xcccccc);**
** scene.add(ambientLight);**

** var directionalLight = new THREE.DirectionalLight(0xffffff);**
** directionalLight.position.set(0, 1, 1).normalize();**
** scene.add(directionalLight);**
** // glTf Loader**
** var loader = new THREE.GLTFLoader();**
** loader.load(‘3D/model/model.glb’, function (gltf) {**

** var model = gltf.scene;**

** scene.add(model);**

** mixer = new THREE.AnimationMixer(ninjamodel);**
** myanimations = gltf.animations;**
** console.log(myanimations);**

** // get all the animations**

** //first animation**
** action1 = mixer.clipAction(myanimations[0]);**

** //second animation**
** action2 = mixer.clipAction(myanimations[1]);**

** //third animation**
** action3 = mixer.clipAction(myanimations[2]);**

** //fourth animation**
** action4 = mixer.clipAction(myanimations[3]);**

** //fifth animation**
** action5 = mixer.clipAction(myanimations[4]);**

});

clock = new THREE.Clock();
stats= new Stats();

** function render() {**

** var delta = clock.getDelta();**

** if ( mixer ) {**

** mixer.update( delta );**

** }**

** renderer.render( scene, camera );**

** stats.update();**
** }**

** function animate() {**
** render();**
** requestAnimationFrame(animate);**
** }**

** render();**
** animate();**

** window.onresize = function(event) {**
** renderer.setSize(window.innerWidth, window.innerHeight);**
** document.body.appendChild(renderer.domElement);**
};

and the tags look something like that:

 <script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src="js/sceneloader.js"></script>
<script src="js/stats.min.js"></script>
7

Please try it first without stats.js to see if your original issue with AnimationMixer is solved. So remove all code related to stats.js from your example.

BTW: Please try to properly format your code. You can use three ` symbols to introduce and close a code section.

8

somehow when i changed the order of this two lines ` <script src=“js/sceneloader.js”></script> <script src=“js/stats.min.js”></script> , it worked just fine, only thing now is the model is loading without its texture…