Graphics Reference
In-Depth Information
// a - - b
// | x |
// c - - d
var a = x + z * width;
var b = (x + 1) + (z * width);
var c = x + ((z + 1) * width);
var d = (x + 1) + ((z + 1) * width);
var face1 = new THREE.Face3(a, b,
d);
var face2 = new THREE.Face3(d, c,
a);
geom.faces.push(face1);
geom.faces.push(face2);
}
}
As you can see, each set of four vertices is converted into two
THREE.Face3
elements and added to the
faces
array.
4. Now all we need to do is to let Three.js calculate the vertex and face normals,
and we can create
THREE.Mesh
from this geometry and add it to the scene:
geom.computeVertexNormals(true);
geom.computeFaceNormals();
var mesh = new THREE.Mesh(geom, new
THREE.MeshLambertMaterial({color:
0x666666}));
scene.add(mesh);
Tip
If you render this scene, you might need to play around with the camera position
and the scale of the final mesh to get the correct size.
