As a beginner in three.js, I encountered an issue while trying to attach animation to the mesh. Utilizing JSONLoader for this purpose, I generated the js file using a Maya plug-in available at this link.
Having successfully loaded the mesh and textures, I faced a situation where only the skeleton was moving during animation playback, leaving the mesh static.
If anyone could provide guidance or assistance, it would be greatly appreciated!
Below is the script snippet:
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, objects, mesh;
var clock;
// initialize 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;
}
}
// Rest of the script goes here...