Getting started with Three.js : Part3

Three.js(r55) loading 3d model tutorial 教學

WebGL Demo (for chrome)

loading OBJ files:

OBJ - texture
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader();
loader.addEventListener( 'load', function ( event ) {
  texture.image = event.content;
  texture.needsUpdate = true;
} );
loader.load( 'obj/ship_texture.jpg' );

OBJ - model
var loader = new THREE.OBJMTLLoader();
loader.addEventListener( 'load', function ( event ) {
  var object = event.content;
  object.scale.x = object.scale.y = object.scale.z = 2;
  object.position.y = 300;
  scene.add( object );
});
loader.load( 'obj/myModel.obj', 'obj/myModel.mtl' );

if you have to use a large OBJ file, you can convert it to binary file.
ie:
python convert_obj_three.py -i myModel.obj -o myModel-bin.js -t binary
reduce file size: 2.27MB -> 0.5MB

loading binary files:

var loader = new THREE.BinaryLoader();
var callback = function( geometry,materials ) {
  ship = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials));
  ship.scale.x = ship.scale.y = ship.scale.z = 1.5;
  ship.position.x = -50;
  ship.position.y = 10;
  scene.add( ship );
};
loader.load( "obj/myModel-bin.js", callback );

source code: