How to effectively use TraingleStripDrawMode in three.js?

THREE.js have included TriangleStripDrawMode, or TriangleFanDrawMode for some revisions now.

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.

Consider this mesh for example:

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);

unless I replace // Placeholder with

geo.faces.push( new THREE.Face3( 0, 1, 2 ),
  new THREE.Face3( 2, 3, 0 ) );

What is the use of setting the draw mode if I end up replicating indices – 2, 0 here? Or is there something obvious that I am missing?

Answer

You should use THREE.BufferGeometry if you want to use THREE.TriangleStripDrawMode.

Here is a very simple example:

var geometry = new THREE.BufferGeometry();

var positions = new Float32Array( 4 * 3 ); // 4 triangles, 3 vertices each

positions[ 0 ] = 0;
positions[ 1 ] = 10;
positions[ 2 ] = 0;

positions[ 3 ] = 0;
positions[ 4 ] = 10;
positions[ 5 ] = 10;

positions[ 6 ] = 0;
positions[ 7 ] = 0;
positions[ 8 ] = 10;

positions[ 9 ] = 10;
positions[ 10 ] = 10;
positions[ 11 ] = 10;

geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

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

mesh.setDrawMode( THREE.TriangleStripDrawMode );

scene.add( mesh );

three.js r.76