Game Development Reference
In-Depth Information
Next, we need to modify our map to add flags for the Red and Blue teams, which
we'll represent as
R
and
B
, respectively:
var map = "XXXXXXX \n" +
"X S X \n" +
"X R X \n" +
"X XX \n" +
"X XXX\n" +
"XXX X\n" +
" XX X\n" +
" X B X\n" +
" X S X\n" +
" XXXXXXX";
Now we need to actually add those flags to the world. Flags are not simple geometric
primitive shapes though, so we'll want to import a more complex mesh.
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);
});
