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?

97 thoughts on “How to effectively use TraingleStripDrawMode in three.js?”

Leave a Comment