javascript - WebGL + Three.js - Applying Custom Texture to .Obj Model -

i've pasted of code. basically, can't figure out how apply custom texture object. apply javascript code below, replacing meshlambertmaterial have no idea started. feel should no more few lines of code. need replace following:

var material = new three.meshfacematerial(materials);       var material2 = new three.meshlambertmaterial({ color: 0x33ffcc });        object.traverse( function(child) {         if (child instanceof three.mesh) {            // apply custom material           child.material = material2;         }       }); 

...with more this:

var texture = new three.texture();              var loader = new three.imageloader();             loader.addeventlistener( 'load', function ( event ) {                  texture.image = event.content;                 texture.needsupdate = true;                 texture.magfilter = three.nearestfilter;                 texture.minfilter = three.nearestmipmaplinearfilter;              } );             loader.load( 'texture.png' ); 

the following main script:

 var my3dview = {   scene: null,   camera: null,   renderer: null,   container: null,   controls: null,   clock: null,    init: function() { // initialization      // create main scene     this.scene = new three.scene();     this.scene.fog = new three.fogexp2(0xcce0ff, 0.0003);      var screen_width = window.innerwidth,     screen_height = window.innerheight;      // prepare camera     var view_angle = 6, aspect = screen_width / screen_height, near = 1, far = 1000;     this.camera = new three.perspectivecamera( view_angle, aspect, near, far);     this.scene.add(this.camera);     this.camera.position.set(0,50,300);     this.startposition = this.camera.position.clone();     this.camera.position.set(this.startposition.x, this.startposition.y, this.startposition.z);     this.camera.lookat(new three.vector3(0,0,0));      // prepare renderer     this.renderer = new three.webglrenderer({ antialias:true });     this.renderer.setsize(screen_width, screen_height);     this.renderer.setclearcolor(this.scene.fog.color);      // prepare container     this.container = document.createelement('div');     document.body.appendchild(this.container);     this.container.appendchild(this.renderer.domelement);      // events     threex.windowresize(this.renderer, this.camera);      // prepare controls (orbitcontrols)     this.controls = new three.orbitcontrols(this.camera, this.renderer.domelement);     this.controls.target = new three.vector3(0, 0, 0);     this.controls.maxdistance = 1000;      // prepare clock     this.clock = new three.clock();      // add spot light     var splight = new three.spotlight(0xffffff, 1.75, 2000, math.pi);     splight.position.set(200, 1000, 200);      this.scene.add(splight);     // add spot light     var splight2 = new three.spotlight(0xffffff, 1.75, 2000, math.pi);     splight2.position.set(-200, -750, -200);     this.scene.add(splight2);      // load model     this.loadmodel();   },   loadmodel: function() {      // prepare loader , load model     var oloader = new three.objloader();     oloader.load('tshirt.obj', function(object, materials) {        var material = new three.meshfacematerial(materials);       var material2 = new three.meshlambertmaterial({ color: 0x33ffcc });        object.traverse( function(child) {         if (child instanceof three.mesh) {            // apply custom material           child.material = material2;         }       });        object.position.x = 6;       object.position.y = -8;       object.position.z = 0;       object.scale.set(1, 1, 1);       my3dview.scene.add(object);     });   } };  // animate scene function animate() {   requestanimationframe(animate);   render();   update(); }  // update controls function update() {   my3dview.controls.update(my3dview.clock.getdelta()); }  // render scene function render() {   if (my3dview.renderer) {     my3dview.renderer.render(my3dview.scene, my3dview.camera);   } }  // initialize lesson on page load function initializelesson() {   my3dview.init();   animate(); }  if (window.addeventlistener)   window.addeventlistener('load', initializelesson, false); else if (window.attachevent)   window.attachevent('onload', initializelesson); else window.onload = initializelesson; 

i'm loading following files main html:

<script src="js/three.min.js"></script> <script src="js/objloader.js"></script> <script src="js/threex.windowresize.js"></script> <script src="js/orbitcontrols.js"></script> <script src="js/stats.min.js"></script> <script src="js/script1.js"></script>