Loading the Game Scene - WebGL Game Development - page 80

Each 3D model is represented by its Geometry class. Each Geometry object has
information listed as follows:

• Vertices : Read from the JSON object.

• Normals : Read from the JSON object or calculated from the vertices and

indices arrays.

• UV map : Read from the JSON object.

• Per vertex colors : Read from the JSON object.

• Materials : Read from the JSON object.

• Indices : Generated from the faces array.

• Faces : The array of the Face objects. Each Face object represents polygon that

forms the geometry.

The classes Face and Geometry are taken from the three.
js library ( https://github.com/mrdoob/three.js/
blob/master/src/core/ ), and we have modified them to
suit our architecture. We did this since the JSON format we
have used in our topic is also taken from the three.js library.

Implementing Face.js
Open the Face.js file from the primitive folder in your editor. We have also added
a new function clone so that we can create a new Face object with its data elements.
The constructor defines variables to store information such as vertex index, normal
of a polygon, and so on. The Face.js file has the following code:

Face = function ( a, b, c, normal, color, materialIndex ) {
this.a = a;// Index to the first vertex of the polygon
this.b = b;// Index to the second vertex of the polygon
this.c = c; //Index to the third vertex of the polygon
this.normal = normal ;// The index to face normal
this.vertexNormals = [ ];//Indexes to each vertex normal of the
face
this.vertexColors = color instanceof Array ?color : [];//Colors
of each vertex
this.colorIndex = color;
this.vertexTangents = [];
this.materialIndex = materialIndex !== undefined ?
MaterialIndex : 0;
};
Face.prototype = {
constructor: Face,