CODEWITHSUNDEEP
javascriptthree.jswebgl
monk
monk

Reputation: 4817

How to texture animated js model exported from blender ? [Three.js]

I have successfully animated a model in blender using bone animation technique and i have also textured it in blender using uv texturing. Then Using three.js export add-on in blender i have exported the model making sure uv and animation in checked in. However i don't know the technique to load the texture for the animated model. I viewed the morph normal example included in three.js where there is simple color texture is used using Lambert material. I have texture from external file. How do i load the texture. In js animated model file there is location for the texture and it is in same location. But it doesn't load. i used the face material technique as well.

the location for three.js example that i used to modify:

http://threejs.org/examples/webgl_morphnormals.html

Here is my code:

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 );

            } );

Except the documentation and some basic tutorials scattered across the web, is there anywhere i can learn three.js from ground up. like i know setting up scene and creating basic geometry stuffs but some detail info like loading textured model loading scenes etc.

Upvotes: 1

Views: 3355

Answers (2)

Stemkoski
Stemkoski

Reputation: 9045

I have created a series of commented examples for Three.js that illustrate features one at a time, starting with very basic features and progressing to more advanced ones (including loading models).

http://stemkoski.github.io/Three.js

Hope this helps!

Upvotes: 10

rossmckegney
rossmckegney

Reputation: 460

Working with complex geometry, materials, textures, and animations are some of the hardest things to figure out in THREE.js - that's why we started there with our editor.

We make all of these easy. Export an FBX file (or OBJ/MTL, or Collada) from Blender. Bring it into a project in Verold Studio, then load it into your THREE.js program using our loader. Service is free for use, you pay us if you want enablement services or have a client who wants a maintenance/support agreement.

See the example below, couldn't be easier to bring your scene to THREE.js,

http://jsfiddle.net/rossmckegney/EeMCk/

     // 1. Set and then start the animation :)   
     this.model.setAnimation("mixamo.com"); 
     this.model.playAnimation(true);
     //this.model.pauseAnimation(); 

     // 2. Get the threedata for a model
     console.log(this.model.threeData);

     // 3. Move the model
     this.tweenObjectTo(
         this.model.threeData,                // the model
         new THREE.Vector3(1, 0, 0),          // go to
         new THREE.Quaternion(),              // rotation
         1,                                   // time, in seconds
         false,                               // smooth start 
         true);                               // smooth end 

      // 4. Clone the model
      that = this;
      this.model2 = this.model.clone({  
        success_hierarchy: function(clonedModel) {
          that.veroldEngine.getActiveScene().addChildObject(clonedModel);
        }
      });

Upvotes: 2

Related Questions