three.jsでTraingleStripDrawModeを効果的に使用するには？

Question

THREE.jsには、現在いくつかのリビジョンでTriangleStripDrawMode、またはTriangleFanDrawModeが含まれています。

私はオンラインで検索しようとしましたが、自分でそれをよりよく理解するために実験しましたが、すべてが無駄です。私はまだ冗長性を防ぐため、またはデータ交換を最小限に抑えるために、これらのモードをどのように利用するのか分かりません。

例えば、このメッシュ考えてみましょう：私は

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

で// Placeholderを交換しない限り、私はインデックス複製終わる場合は描画モードを設定するのに使用するものである

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

を - ここ2, 0は？ または、私が行方不明であることが明らかになっていますか？

Answer 1

THREE.TriangleStripDrawModeを使用する場合は、THREE.BufferGeometryを使用してください。私は最小限に問題をトリムダウンしている

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