load model

var light = new THREE.PointLight( 0xFFFFDD );
light.position.set( -15, 10, 15 );
scene.add( light );

var ambient = new THREE.AmbientLight( 0x999999 );
scene.add( ambient );

A point light will provide directional light originating from its position. An ambient light provides a crude emulation of secondary illumination, i.e. light that does not come directly from a light source, but rather is reflected off of walls and other objects. Note that the lights must be added to the scenegraph.

var loader = new THREE.ObjectLoader(  );
var onScene = function(scn) {
  var mesh = scn.getObjectByName("Bug");
  mesh.material.shininess = 5;
  requestAnimationFrame( render );
loader.load("models/vwbug/vwbug-scene.json", onScene);

In order to load a 3D model into the scene, a loader must be created. Here the ObjectLoader, which loads three's native 3D format is used. Other loaders, notably one for Collada, are available, as well as translators (e.g. from OBJ format into three's native format). The last line tells the loader to load the model found in the file vwbug-scene.json. Note that the model files has the *.json extension. In fact, this file is just a normal text file describing the object in JSON (load it into an editor and take a look!), which in turn may reference binary format files (textures).

The second argument to the loader is a special callback function "onScene", defined here. By passing it as the second argument to the invocation of the load function, we are requesting that the loader call it as soon as the model is loaded. Why are we doing this?

When "onScene" is invoked, its argument is set to the object that was loaded, in this case a THREE scene. This is a new scene, completely separate from the one we just created, and we only need the mesh it contains. When this mesh was created in Blender, it was given the name "Bug". The first line of onScene find Bug inside the loaded scene. "scene.add(mesh)" then adds Bug to our original scene. The browser is then requested to invoke the "render" function at its earliest convenience with the line "requestAnimationFrame( render )". Note that a pattern typically seen in other programming contexts, where the program simply pauses and waits for a load to complete before continuing, is not possible here. If it were possible, you wouldn't want to do it anyway, as the browser would "hang" (become non-responsive) while the file was loading.

example 1: load model