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


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

Thanks ASH

  • $\begingroup$ Ok, so You tried and to what end? Where is the Blender related question here? $\endgroup$
    – Mzidare
    Oct 13, 2016 at 10:00
  • $\begingroup$ i need add animations to the human body using blender which should work seamlessly by adding the textures as well from the web. $\endgroup$ Oct 13, 2016 at 12:49
  • $\begingroup$ That makes more sense although I'm more Blender then three.js expert, so unfortunately can't help you on that. I hope someone will.Cheers $\endgroup$
    – Mzidare
    Oct 13, 2016 at 13:15

1 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.


Not the answer you're looking for? Browse other questions tagged .