After successfully animating a model in Blender using bone animation and texturing it with UV mapping, I exported the model with UV and animation checked using the three.js export add-on in Blender. However, I am struggling to load the texture for the animated model. I tried to follow a morph normals example in three.js where a simple color texture is used with a Lambert material, but I have an external texture file that I am unsure how to load. Even though the texture is in the same location as the animated model file, it does not load when using the face material technique.
Here is the link to the three.js example I used for reference:
Below is the code snippet I have been working with:
var loader = new THREE.JSONLoader();
loader.load( "bird_final.js", function( geometry, materials ) {
morphColorsToFaceColors( geometry );
geometry.computeMorphNormals();
// the old code to set color to the model
//var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading } );
// my code
var meshAnim = new THREE.MorphAnimMesh( geometry, new THREE.MeshFaceMaterial( materials ) );
meshAnim.duration = 500;
meshAnim.scale.set( 20, 20, 20 );
meshAnim.position.y = 150;
meshAnim.position.x = -100;
scene1.add( meshAnim );
morphs.push( meshAnim );
} );
Aside from the scattered documentation and basic tutorials available online, I am looking for a comprehensive resource to learn three.js from the ground up. I have a basic understanding of setting up scenes and creating basic geometries, but I need more detailed information on loading textured models and scenes in three.js.