Once we have the triangle down, we can start to build more complex things. We begin with a square:

Simple square

The code looks like this:

function makeSquare() {
  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, 0);
  geom.vertices.push(a, b, c, d);
  let face1 = new THREE.Face3(0, 1, 2);
  let face2 = new THREE.Face3(1, 2, 3);
  geom.faces.push(face1, face2);
  let args = {color: 0xFF00FF, side: THREE.DoubleSide};
  let mat = new THREE.MeshBasicMaterial(args);
  let mesh = new THREE.Mesh(geom, mat);
  return mesh;
}

The square is made of two triangles, and there are four vertices in total (labelled a, b, c, and d). The two triangles share the vertices b and c. Note that two triangular faces are pushed into the geometry’s vertices array.

Based on the colorful triangle defined on the previous page, you might wish to write code for a square whose four vertices are assigned different colors, and the square interior is painted by interpolating these colors.