How to effectively use TraingleStripDrawMode in three.js?
<p>THREE.js have included TriangleStripDrawMode, or TriangleFanDrawMode for some revisions now.</p>

<p>I have tried searching for it online, as well as experimenting on my own to understand it better, but all is wasted. I still don't know how to utilize these modes to prevent redundancy, or to minimize the data exchange.</p>

<p>Consider this mesh for example:</p>

<pre><code>var geo = new THREE.Geometry( );
geo.vertices.push( new THREE.Vector3( 0, 0, 0 ),
  new THREE.Vector3( 0, 100, 0 ),
  new THREE.Vector3( 0, 100, 100 ),
  new THREE.Vector3( 0, 0, 100 )
);

// Placeholder

var mesh = new THREE.Mesh( geo, new THREE.MeshBasicMaterial( {
  side: THREE.DoubleSide
} ) );
mesh.setDrawMode( THREE.TriangleStripDrawMode );

// Nothing renders
scene.add(mesh);
</code></pre>

<p>unless I replace <code>// Placeholder</code> with</p>

<pre><code>geo.faces.push( new THREE.Face3( 0, 1, 2 ),
  new THREE.Face3( 2, 3, 0 ) );
</code></pre>

<p>What is the use of setting the draw mode if I end up replicating indices - <code>2, 0</code> here?
Or is there something obvious that I am missing?</p>