Cannot attach the animation to the mesh?

Question

I'm new in three.js and I have a problem to attach the animation to the mesh. I'm trying to use JSONLoader for this purpose. I created the js file using this Maya plug-in - https://github.com/BlackTowerEntertainment/three.js/tree/maya_animation_exporter/utils/exporters/maya.

I've already loaded the mesh and the textures. I found the way to show the skeleton and when the animation is playing I can see that only skeleton is moving. The mesh is static!

I will appreciate any help!

This is my script:

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var container, stats;
        var camera, scene, renderer, objects, mesh;
        var clock;

        // instantiate a loader
        var imageLoader = new THREE.ImageLoader();



        var loader = new THREE.JSONLoader();
        loader.load( 'elephant2.js', function (geometry, materials)  {

            geometry.computeVertexNormals();
            geometry.computeBoundingBox();
            ensureLoop( geometry.animation );

            var material1 = new THREE.MeshPhongMaterial({map:THREE.ImageUtils.loadTexture( "textures/CH_NPC_MOB_Elephant_A01_D_GRN.jpg" )});
            var material2 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('textures/CH_NPC_MOB_Elephant_A01_N_GRN.jpg') } );
            var material3 = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('textures/CH_NPC_MOB_Elephant_A01_SP_GRN.jpg') } );

            var materials = [material1, material2, material3];
            var meshFaceMaterial = new THREE.MeshFaceMaterial( materials );

            var mesh = new THREE.SkinnedMesh( geometry, meshFaceMaterial );
            mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.015
            mesh.updateMatrix();

            var animation = new THREE.Animation( mesh, geometry.animation);
            animation.play();

            init(mesh);
            animate();

        } );



        function ensureLoop( animation ) {

            for ( var i = 0; i < animation.hierarchy.length; i ++ ) {

                var bone = animation.hierarchy[ i ];

                var first = bone.keys[ 0 ];
                var last = bone.keys[ bone.keys.length - 1 ];

                last.pos = first.pos;
                last.rot = first.rot;
                last.scl = first.scl;

            }

        }

        function init(mesh) {


            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            camera.position.set( 2, 2, 3 );

            scene = new THREE.Scene();

            // Grid

            var size = 14, step = 1;

            var geometry = new THREE.Geometry();
            var material = new THREE.LineBasicMaterial( { color: 0x303030 } );

            for ( var i = - size; i <= size; i += step ) {

                geometry.vertices.push( new THREE.Vector3( - size, - 0.04, i ) );
                geometry.vertices.push( new THREE.Vector3(   size, - 0.04, i ) );

                geometry.vertices.push( new THREE.Vector3( i, - 0.04, - size ) );
                geometry.vertices.push( new THREE.Vector3( i, - 0.04,   size ) );

            }

            var line = new THREE.Line( geometry, material, THREE.LinePieces );
            scene.add( line );

            // Add the COLLADA

            scene.add(mesh);

            particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
            scene.add( particleLight );

            // Lights

            scene.add( new THREE.AmbientLight( 0xcccccc ) );

            var directionalLight = new THREE.DirectionalLight(/*Math.random() * 0xffffff*/0xeeeeee );
            directionalLight.position.x = Math.random() - 0.5;
            directionalLight.position.y = Math.random() - 0.5;
            directionalLight.position.z = Math.random() - 0.5;
            directionalLight.position.normalize();
            scene.add( directionalLight );

            var pointLight = new THREE.PointLight( 0xffffff, 4 );
            //particleLight.add( pointLight );

            renderer = new THREE.WebGLRenderer();
            //renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            container.appendChild( stats.domElement );

            helper = new THREE.SkeletonHelper( mesh );
            helper.material.linewidth = 3;
            helper.visible = true;
            scene.add( helper );


            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }


        function animate() {

            requestAnimationFrame( animate );

            render();
            stats.update();

        }

        var clock = new THREE.Clock();

        function render() {
            var delta = 0.75 * clock.getDelta();
            var timer = Date.now() * 0.0005;

            camera.position.x = Math.cos( timer ) * 10;
            camera.position.y = 2;
            camera.position.z = Math.sin( timer ) * 10;



            camera.lookAt( scene.position );

            particleLight.position.x = Math.sin( timer * 4 ) * 3009;
            particleLight.position.y = Math.cos( timer * 5 ) * 4000;
            particleLight.position.z = Math.cos( timer * 4 ) * 3009;
            THREE.AnimationHandler.update( delta );
            if ( helper !== undefined ) helper.update();

            renderer.render( scene, camera );

        }

Answer 1

I found the problem. Every material.material.skinning needs to be set to true.