\( \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\\\#2\\\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\\\#2\\\\#3\\\\#4 \end{array}\right]} \newcommand{\Choose}[2]{ { { #1 }\choose{ #2 } } } \newcommand{\vecII}[2]{\left[\begin{array}{c} #1\\\\#2 \end{array}\right]} \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\\\#2\\\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\\\#2\\\\#3\\\\#4 \end{array}\right]} \newcommand{\matIIxII}[4]{\left[ \begin{array}{cc} #1 & #2 \\\\ #3 & #4 \end{array}\right]} \newcommand{\matIIIxIII}[9]{\left[ \begin{array}{ccc} #1 & #2 & #3 \\\\ #4 & #5 & #6 \\\\ #7 & #8 & #9 \end{array}\right]} \)

The Vertices Buffer

The Threejs description of custom geometry that we looked at earlier is accurate (the various vectors are one dimensional), but consequently hard to read. So, I'm going to lay things out differently.

Here are some vertices:

A table of vertex information
Part of the vertex information for the box. The first four columns are the forward-facing vertices of the front (blue) face of the box. The next four are the right-facing vertices of the red face of the box.

These vertices are numbered slightly differently than for the barn. For example, vertex 0 (the first column) has coordinates (-1, 2, 3), so it's the upper left vertex when we are looking at the front side (the blue side). It's normal vector is (0,0,1) which is parallel to the z axis.

The Indices Buffer

Now, to make the front (blue) face of the box, we need two triangles. We'll do that using indices into the array of vertices.

Here's how we will draw the front face with two triangles:

Two triangles to form a quadrilateral
A face of the box can be drawn with two triangles.

For this quad, the triangles are created by specifying the index of each vertex of the triangle. So, each triangle is 3 indices. 

0, 1, 2  // the lower left triangle
0, 2, 3  // the upper right triangle

These are indices into the vertices array. Look back to see the coordinates.

  • vertex 0, which is the upper left corner, has coordinates (-1, +2, +3)
  • vertex 1, which is the lower left corner, has coordinates (-1, -2, +3)
  • vertex 2, which is the lower right left corner, has coordinates (+1, -2, +3)
  • vertex 3, which is the upper right corner, has coordinates (+1, +2, +3)

Note that you can ignore the Z coordinate, because they are all +3