We live in a 3D world. Therefore, for us to convincingly fool our users into believing that their reality is being augmented or altered, we need to work with their world in three dimensions. Now, each of the platforms we are working with (web, Android, and Unity), all have 3D engines we will be using. In the case of Unity, it is the 3D engine and without a doubt the easiest to use with little or no programming or math knowledge required. Android and OpenGL ES is a distant second, as it will require some knowledge of 3D math. The third and last option is our 3D engine for web, which will be three.js library. The three.js will be the most difficult platform to work with when using 3D, which makes it our perfect candidate to start with.

Unlike in the previous chapters, we will not do just a simple text change to test our ability to change and deploy code. Instead, in this section, we will modify the 3D object we spawn. This will be a good dive into the deep end of 3D and get us ready for the rest of the book. Let's get started by following the given steps:

1. Use a text editor such as Notepad, Notepad++, vi, or something else to open the spawn-at-camera.html file located in the Android/three.ar.js/example folder.
2. Scroll down in the code until you see the following section:

var geometry = new THREE.BoxGeometry( 0.05, 0.05, 0.05 );
var faceIndices = ['a', 'b', 'c'];
for (var i = 0; i < geometry.faces.length; i++) 
{
  var f  = geometry.faces[i];
  for (var j = 0; j < 3; j++) 
{
    var vertexIndex = f[faceIndices[ j ]];
    f.vertexColors[j] = colors[vertexIndex];
  }
}
var material = new THREE.MeshBasicMaterial({ vertexColors:       
                                           THREE.VertexColors });

3. Comment out or delete the entire section of code. Use // to convert a line as a comment.
4. Enter the new code just before the highlighted line:

var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
cube = new THREE.Mesh(geometry, material);

5. This first new line replaces the geometry with a torus. The TorusGeometry is a helper function for creating a torus. There are plenty of other helpers for creating many other geometries or even loading mesh objects. The second line creates a new basic single color material. Then, it wraps that material around the geometry and creates our object (mesh), which for now, we will keep calling cube. If you feel the need to change the variable name, then by all means go ahead, but do be careful.
6. Save your code changes.

7. Switch back to your device and refresh the page. Then, tap the screen to spawn the new object. At first, you may think that nothing worked; walk away and move around. You will likely only see the edges of a very large bright yellow torus. If you still have some issues, just ensure that you saved changes and try reconnecting everything.

At this point, we have a number of problems to understand and solve, as outlined in the following list:

• The object is too big or out of scale
• The object is orientated or rotated wrong
• The object needs to be moved or transformed to just in front of the camera
• We want to change the color