using three.js how to add texture to .OBJ object [closed]

Question

We have exported sample human model(.obj) from makehuman.org along with textures(shirts/trousers as img) and tried to run the same from browser using three.js

Using MeshPhongMaterial tried to add texture(dress) to the human model but it went into indefinite error. pls suggest the way forward.

var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('female_casualsuit01_diffuse.png') } );

var geometry = new THREE.SphereGeometry(1000, 20, 20); var meshFaceMaterial = new THREE.MeshFaceMaterial( material); var mesh = new THREE.Mesh(geometry, meshFaceMaterial); scene.add(mesh);

FYI:

The following is the code snippet being used: https://jsfiddle.net/84fu6f7m/1/

Thanks ASH

Answer 1

In your example you're creating the material but not applying it to the Mesh(es) loaded from the OBJ yet. You can do that as follows:

// Create a material
var textureLoader = new THREE.TextureLoader();
var map = textureLoader.load('./diffuse.png');
var material = new THREE.MeshPhongMaterial({map: map});

var loader = new THREE.OBJLoader();
loader.load( './my-model.obj', function ( object ) {

  // For any meshes in the model, add our material.
  object.traverse( function ( node ) {

    if ( node.isMesh ) node.material = material;

  } );

  // Add the model to the scene.
  scene.add( object );
} );

three.js r89. Documentation for THREE.OBJLoader.