title: Three.js how to explode mesh with rectangles
body: <p>We are trying to use the tessallation and explode modifier in this example (<a href="http://threejs.org/examples/#webgl_modifier_tessellation" rel="nofollow">http://threejs.org/examples/#webgl_modifier_tessellation</a>) to explode a sphere into rectangles and not triangles. </p>
  
  <p>Here is the link to the code we have    <a href="https://jsfiddle.net/cloacker/2dxp3ga8/" rel="nofollow">https://jsfiddle.net/cloacker/2dxp3ga8/</a></p>
  
  <p>Displacement for the faces is calculated in this block of code. I believe this is calculated for three faces, but how to define adjacent faces or if that is even possible?</p>
  
  <pre><code>for ( var f = 0; f &lt; numFaces; f ++ ) {
      var index = 9 * f;
      var h = 0.2 * Math.random();
      var s = 0.5 + 0.5 * Math.random();
      var l = 0.5 + 0.5 * Math.random();
  
      color.setHSL( h, s, l );
  
      var d = 10 * ( 0.5 - Math.random() );
  
      for ( var i = 0; i &lt; 3; i ++ ) {
          colors[ index + ( 3 * i )     ] = color.r;
          colors[ index + ( 3 * i ) + 1 ] = color.g;
          colors[ index + ( 3 * i ) + 2 ] = color.b;
  
          displacement[ index + ( 3 * i )     ] = d;
          displacement[ index + ( 3 * i ) + 1 ] = d;
          displacement[ index + ( 3 * i ) + 2 ] = d;
      }
  }
  </code></pre>
  
  <p>EDIT:
  I had to change the code to work with numFaces/4 to make it work for my sphere parameters.</p>