Asset management

Primitive geometric shapes are great for tests, but any serious game these days will likely make heavy use of 3D models created in a specialized program such as Blender, Maya, or 3ds Max. These models need to be imported into Three.js scenes and converted to THREE.Mesh objects with geometry and materials. Luckily, Three.js provides importers called loaders for a variety of file formats.

Loaders

For our flags, we'll use a simple mesh in Collada format. (Collada is an XML-based format for storing 3D mesh and animation data, with files ending in .dae.) You can download our flag mesh from the Packt Publishing website. The ColladaLoader is not included in the main Three.js library, but can be copied from examples/js/loaders/ColladaLoader.js and then included in your HTML as:

<script src="ColladaLoader.js"></script>

Then the model can be loaded like this:

var loader = new THREE.ColladaLoader();
loader.load('flag.dae', function(result) {
  scene.add(result.scene);
});

Often...