title: Three.js removing inner faces
body: <p>I am merging multiple cubes into different block shapes with <code>three.js</code> using <code>THREE.GeometryUtils.merge</code>. I want to make these block shapes transparent, but when it's transparent you can see that it's multiple cubes stuck together like this:</p>
  
  <p><img src="https://i.stack.imgur.com/zGzrJ.png" alt="merged cubes"></p>
  
  <p>How do I make my merged cubes transparent without rendering the inside edges? (how do I remove the inner faces?)</p>
  
  <p>My code that merges the cubes:</p>
  
  <pre><code>geometry = new THREE.CubeGeometry(STEP_SIZE, STEP_SIZE, STEP_SIZE);
  for (i = 0; i &lt; shape.length; i++) {
      tmpGeometry =  new THREE.Mesh(new THREE.CubeGeometry(STEP_SIZE, STEP_SIZE, STEP_SIZE));
      tmpGeometry.position.x = STEP_SIZE * shape[i].x;
      tmpGeometry.position.y = STEP_SIZE * shape[i].y;
      THREE.GeometryUtils.merge(geometry, tmpGeometry);
  }
  
  block = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x0000ff, opacity: 0.5, transparent: true }));
  </code></pre>