In the square on the previous page, we don’t see the crease, that is, the edge shared by the two triangles that make up the square. This is because the two triangles not only meet at this edge, but because the two triangles lie in the same plane. Here is an example of two triangles that share an edge but do not lie in the same plane.

Simple non-square

The crease is visible because the two triangles lie in different planes, and we’re using a lighting model that illuminates the two triangles with different intensities because of the triangles’ different orientations. The previous examples have not used lighting, but it’s something we’ll look into later.

Look at the following code for this simple non-square scene. Compare it to the simple square code on the previous page. Note why the non-square’s color changes every time you refresh the page.

function makeNonSquare() {
  let geom = new THREE.Geometry();
  let a = new THREE.Vector3(0, 0, 0);
  let b = new THREE.Vector3(8, 0, 0);
  let c = new THREE.Vector3(0, 8, 0);
  let d = new THREE.Vector3(8, 8, 4);
  geom.vertices.push(a, b, c, d);
  var face1 = new THREE.Face3(0, 1, 2);
  var face2 = new THREE.Face3(1, 2, 3);
  geom.faces.push(face1, face2);
  geom.computeFaceNormals();
  let color = getRandomColor();
  let args = {color: color, flatShading: true, side: THREE.DoubleSide};
  let mat = new THREE.MeshLambertMaterial(args);
  let mesh = new THREE.Mesh(geom, mat);
  return mesh;
}