Test of GLTF/GLB animations [SOLVED]

Hi, its my firts post and I searched about this in the forum but i didn’t find it.

I am making a test with BLENDER and THREE.JS and I think that this framework is great.

My problem is the next: When I try “play the animations” the windows browser broken, i upload my .glb in GLFTviewer and it´s all correct. My .js

   'use strict';
//Reloj para animación,
    const clock = new THREE.Clock();
//Creación de espacio contenedor,
const container = document.querySelector( '#containerscene' );
//Creación de escena,
const scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x000000 );
    scene.fog = new THREE.Fog( scene.background, 1, 5000 );
//Creación de cámara,
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
        camera.position.set ( 3, 3, 3 );
//Creación de controles, orbitar, zoom, etc...
    const controls = new THREE.OrbitControls( camera, container );
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.enableZoom = true;
        controls.autoRotate = true;
        controls.keys = false;
        controls.target = (new THREE.Vector3( 0, 1, 0 ));
        controls.maxDistance = 2;
        controls.minDistance = 1.5;
        controls.minPolarAngle = 2/3;
        controls.maxPolarAngle = 2;
        controls.zoomSpeed = 0.2;
        controls.mouseButtons = {
            LEFT: THREE.MOUSE.LEFT,
	        MIDDLE: THREE.MOUSE.MIDDLE,
	        RIGHT: THREE.MOUSE.RIGHT = false
        };
        camera.position.set( 1.5, 2, 2);
//Creación de opciones de renderizado,
	const renderer = new THREE.WebGLRenderer( {antialias:true, alpha:true} );
       renderer.shadowMapEnabled = true;
       renderer.shadowMapSoft = true;
       renderer.gammaOutput = true;
       renderer.gammaFactor = 2.5;
       renderer.physicallyCorrectLights = true;
       renderer.setSize( window.innerWidth, window.innerHeight );
       renderer.setPixelRatio( window.devicePixelRatio );
       renderer.setClearColor( 0x333F47, 1 );
	      document.body.appendChild( renderer.domElement );
//Datos de rendimiento
    const stats = new Stats();
      	container.appendChild( stats.dom );
//Datos de control DAT_GUI,
    const statsdatgui = function() {
      this.Autorotate = true;
};
    window.onload = function () {
      var text = new statsdatgui();
      var gui = new dat.GUI();
      const f1 = gui.addFolder('Camera');
          f1.add(text, 'Autorotate').onChange(function(){controls.autoRotate = (text.Autorotate)});
};
//Creación de luces, en este caso 3 luces direccionales y 1 luz ambiente
    let object3d  = new THREE.DirectionalLight( 'white', 1.5 );
            object3d.position.set( -3, 5, -5 );
            object3d.name = 'Back light';
            object3d.castShadow = true;
                scene.add( object3d );
        object3d = new THREE.DirectionalLight( 'white', 1.5 );
            object3d.position.set( 0, 5, 0 );
            object3d.castShadow = true;
            object3d.name = 'Key light';
                scene.add( object3d );
        object3d = new THREE.DirectionalLight( 'white', 1.5 );
            object3d.position.set( 3, 5, 5 );
            object3d.castShadow = true;
            object3d.name = 'Fill light';
                scene.add( object3d );
//Carga de objeto GLTF,
    const loader = new THREE.GLTFLoader();
        loader.load( 'models/Cube.glb', function(gltf){
            var mesh = gltf.scene.children[ 0 ];
    					var s = 0.3;
    					mesh.scale.set( s, s, s );
    					mesh.castShadow = true;
    					mesh.receiveShadow = true;
    					scene.add( mesh );
    					/*var mixer = new THREE.AnimationMixer( mesh );
    					mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
    					mixers.push( mixer );*/
    	}
    );
//Funcion Redimensionar al cambiar la ventana,
    let onWindowResize = function () {
  	    camera.aspect = window.innerWidth / window.innerHeight;
  	    camera.updateProjectionMatrix();
  	    renderer.setSize( window.innerWidth, window.innerHeight );
}
      window.addEventListener( 'resize', onWindowResize );
//Renderizado de la escena, y actualizacion de controladores,
	let animate = function () {
        requestAnimationFrame( animate );
            render();
            controls.update();
            stats.update();
};
    let render = function (){

 /*var delta = clock.getDelta();
    for ( var i = 0; i < mixers.length; i ++ ) {
        mixers[ i ].update( delta );
    }*/
        renderer.render (scene, camera);
    }
//Inicio de las funciones,
        onWindowResize();
        animate();

thank for all.

Can you please share Cube.glb in this thread, too?

Cube.glb (5.2 KB) it’s here.

Proyecto_WEBGL_AAA.zip (262.8 KB) and this is the folders and .js that i am using.

It seems you have not defined the variable mixers in your code.

Put const mixers = []; on the top of webgl.js and the animation should work.

Yes, the problem was the mixers = [ ];. Thanks so much for the fast answer. i so happy and i feel stupid for the solution :slight_smile:. Seriously thank you @Mugen87.

2 Likes