title: Only see one mesh object out of 16 on ThreeJS canvas?
body: <p>I have a ThreeJS scene with 16 objects that are supposed to end up in a 4 by 4 square grid.  However, when I run the code, I only see one of the objects.  I wrote a "dump" function to show me all the current XYZ values of the mesh objects's <strong>position</strong> property, which you can see below.  The values all look good to me and I believe I should see a nice 4 by 4 square grid of objects given the positioning those values present.</p>
  
  <p>I am using this ThreeJS Javascript file for ThreeJS:</p>
  
  <pre><code>https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js
  </code></pre>
  
  <p>I am using this code to create the mesh.  The mesh is a cube with initially the side facing the camera is a cat image:</p>
  
  <pre><code>function makeCatCube(catImageUrl, textureBackSide, locX, locY, locZ) {
      let errPrefix = '(makeCatCube) ';
  
      // TODO: Should we use BoxBufferGeometry here for greater speed?
      let cubeGeometry = new THREE.BoxGeometry(2, 0.1, 2);
      let loader = new THREE.TextureLoader();
  
      let materialArray = [
          new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
          new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
          // Card face.
          new THREE.MeshBasicMaterial( { map: loader.load(catImageUrl) } ),
          // Card back side.
          new THREE.MeshBasicMaterial(
              {
                  map: textureBackSide
              }
          ),
          new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
          new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
      ];
  
      cube = new THREE.Mesh( cubeGeometry, materialArray );
  
      if (g_ShowGraphicsDebugInfo) {
          console.log(errPrefix + `Setting cube position to - X: ${locX}, Y: ${locY}, Z: ${locZ}`);
      }
  
      cube.position.set(locX, locZ, locY);
      // TODO: Magic number to set the cube's X rotation so it looks flat facing the viewer.
      cube.rotation.x = THREE.Math.radToDeg(60);
      return cube;
  }
  </code></pre>
  
  <p>Here is the main promise that builds all the game assets and shows where I add the mesh objects to the scene.  The global <em>g_aryCatCards</em> array that contains all the cat cards that were built is prepared in a much larger module elsewhere.  It contains each of the cat cards and each card has a <em>meshThreeJS</em> property that contains the ThreeJS mesh object (i.e. - the cube) that was built using the <em>makeCatCube()</em> function shown above :</p>
  
  <pre><code>function initializeGameAssets_promise(gameAreaDomElementID, threeJSCanvasAreaDomElementID, catCardWidth, catCardHeight) {
      let errPrefix = '(initializeGameAssets_promise) ';
  
      return new Promise(function(resolve, reject) {
          try {
              buildAllCatCards_promise(gameAreaDomElementID, threeJSCanvasAreaDomElementID, 1, catCardWidth, catCardHeight)
              .then(result =&gt; {
                  g_Scene = new THREE.Scene();
                  g_Scene.background = new THREE.Color('yellow');
  
                  initCamera();
                  initRenderer();
  
                  for (let cardLabelKey in g_aryCatCards) {
                      let catCard = g_aryCatCards[cardLabelKey];
                      g_Scene.add(catCard.meshThreeJS);
                  }
  
                  let threeJSCanvasAreaDOMElement = document.getElementById(threeJSCanvasAreaDomElementID);
                  if (!threeJSCanvasAreaDOMElement)
                      throw new Error(errPrefix + `Unable to find the DOM element for the cat cards underlay table using ID: ${threeJSCanvasAreaDomElementID}`);
  
                  threeJSCanvasAreaDOMElement.appendChild(g_Renderer.domElement);
  
                  let catCardsTableElementOffset = getElementOffsetById(ELEMENT_ID_CAT_CARDS_TABLE);
                  threeJSCanvasAreaDOMElement.left = catCardsTableElementOffset.left;
                  threeJSCanvasAreaDOMElement.top = catCardsTableElementOffset.top;
  
                  // Start the rendering process.
                  render();
  
                  resolve(true);
              })
              .catch(err =&gt; {
                  reject(err);
              });
          }
          catch(err) {
              reject(err);
          }
      });
  }
  </code></pre>
  
  <p>Here are the functions I use to initialize the camera and the renderer:</p>
  
  <pre><code>function initCamera() {
      g_Camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
      g_Camera.position.set(0, 3.5, 5);
      g_Camera.lookAt(g_Scene.position);
  }
  
  function initRenderer() {
      g_Renderer = new THREE.WebGLRenderer(
      {
          antialias: true
      });
  }
  </code></pre>
  
  <p>This dump shows the XYZ values of the mesh object's <em>position</em> property:</p>
  
  <pre><code>------------- DUMPING MESH POSITIONS -------------
  [label: A1] - X: 2, Y: 0, Z: 2
  [label: A2] - X: 176, Y: 0, Z: 2
  [label: A3] - X: 350, Y: 0, Z: 2
  [label: A4] - X: 525, Y: 0, Z: 2
  [label: E1] - X: 2, Y: 0, Z: 364
  [label: E2] - X: 176, Y: 0, Z: 364
  [label: E3] - X: 350, Y: 0, Z: 364
  [label: E4] - X: 525, Y: 0, Z: 364
  [label: L1] - X: 2, Y: 0, Z: 183
  [label: L2] - X: 176, Y: 0, Z: 183
  [label: L3] - X: 350, Y: 0, Z: 183
  [label: L4] - X: 525, Y: 0, Z: 183
  [label: X1] - X: 2, Y: 0, Z: 545
  [label: X2] - X: 176, Y: 0, Z: 545
  [label: X3] - X: 350, Y: 0, Z: 545
  [label: X4] - X: 525, Y: 0, Z: 545
  </code></pre>
  
  <p>I really don't know what to do at this point to debug this problem.  Can anyone give me some general tips on what to inspect, or what diagnostic code I could write to try and figure this out?</p>