title: How can I create the same skeletal animation to different meshes?
body: <p>I am trying to create the same skeleton animation from a mesh to a different mesh. So I deleted the first mesh (<a href="http://threejs.org/examples/models/skinned/marine/marine_anims.blend" rel="nofollow">mesh1</a>), kept the skeleton (which already has skeletal animation) and then, imported the second mesh (<a href="http://threejs.org/examples/models/skinned/UCS/umich_ucs.js" rel="nofollow">mesh2</a>) as an .obj file (converted this .js file into an .obj file, using the <a href="http://threejs.org/editor" rel="nofollow">three.js editor</a>). I scaled, rotated and changed location of the second mesh so it fits the skeleton. Then, I did the process of rigging (I selected the mesh + shift + selected the armature, then clicked "ctrl + P" to create parenting). And it worked, the second mesh was animated according to the skeletal animation of the first mesh. Nevertheless, when I try to export this mesh to three.js as a skeletal animation (I chose pose mode, because when I choose rest mode, it gives me error), the mesh is displayed in a messy way and not with its normal shape. How can I fix this? The javascript code I used is shown below:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;My first Three.js app&lt;/title&gt;
          &lt;style&gt;
              body { margin: 0; }
              canvas { width: 100%; height: 100% }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="models/three.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
  
                  var scene, camera, light, renderer, objeto, animation1;
  
                  var loader, model;
  
                  scene = new THREE.Scene();
                  camera = new THREE.PerspectiveCamera( 75,  window.innerWidth/window.innerHeight, 0.1, 1000 );
  
                  scene.add( new THREE.AmbientLight( 0x666666 ) );
  
                  light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
                  light.position.set( 50, 200, 100 );
                  light.position.multiplyScalar( 1.3 );
  
                  light.castShadow = true;
                  //light.shadowCameraVisible = true;
  
                  light.shadowMapWidth = 1024;
                  light.shadowMapHeight = 1024;
  
                  var d = 300;
  
                  light.shadowCameraLeft = -d;
                  light.shadowCameraRight = d;
                  light.shadowCameraTop = d;
                  light.shadowCameraBottom = -d;
  
                  light.shadowCameraFar = 1000;
                  light.shadowDarkness = 0.5;
  
                  scene.add( light );
  
  
                  renderer = new THREE.WebGLRenderer();
                  renderer.setSize( window.innerWidth, window.innerHeight );
                  document.body.appendChild( renderer.domElement );
  
  
                  camera.position.z = 5;
  
  
                  loader = new THREE.JSONLoader();  
                  loader.load( 'models/marine_anims_morph.json', addModel );
  
  
                  function addModel( geometry,  materials ){
  
                      materials[0].skinning = true;
  
                      objeto = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial(materials));
  
                      objeto.position.y = -1.5;
  
                      objeto.rotation.y = 3.14;
                      objeto.position.x = 0.5;
  
                      objeto.scale.x = 0.02;
                      objeto.scale.y = 0.02;
                      objeto.scale.z = 0.02;
  
  
                      animation1 = new THREE.Animation (objeto, geometry.animations[0]);
                      animation1.play();
  
                      scene.add(objeto);
                  }
  
                  var prevTime = Date.now();
  
                  function render () {
                      if ( animation1 ) {
                          var time = Date.now();
                          animation1.update((time - prevTime)/10);
                          prevTime = time;
                      } 
                  }
  
  
                  function animate(){
                      requestAnimationFrame(animate);
                      render();
                      renderer.render(scene, camera);
                  }
  
                  animate();
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>