如何在three.js中有效使用TraingleStripDrawMode？

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

THREE.js现在包含了TriangleStripDrawMode或TriangleFanDrawMode用于某些修订。

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?

如果我最终复制索引,那么设置绘制模式有什么用 - 这里的2,0?或者有什么明显的东西让我失踪?

1 个解决方案

#1

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

如果要使用THREE.TriangleStripDrawMode,则应使用THREE.BufferGeometry。

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

#1