Three.js - 自定义网格上的奇怪线条

Question

我正在尝试制作自定义网格，以便在场景中有很多可自定义的平面。

这里有一些代码：

geometry = new THREE.BufferGeometry();

geometry.addAttribute( 'position',  new THREE.BufferAttribute( vertexPositions, 3 ).setDynamic( true ) );
geometry.addAttribute( 'color',     new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );
geometry.addAttribute( 'opacity',   new THREE.BufferAttribute( opacity, 1 ).setDynamic( true ) );

// Initialize material
var material = new THREE.ShaderMaterial( { vertexColors: THREE.VertexColors, transparent: true, vertexShader: vertexShader, fragmentShader: fragmentShader } );

// Create something like a Wireframe of the planes
var Pgeometry = new THREE.BufferGeometry();
Pgeometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ApointsPositions ), 3 ).setDynamic( true ) );
var points = new THREE.LineSegments( Pgeometry, new THREE.PointsMaterial( { color: 0x353535 } ) );
scene.add( points );

// Create planes and add to scene
planeMeshes = new THREE.Mesh( geometry, material );
planeMeshes.setDrawMode( THREE.TriangleStripDrawMode );
scene.add( planeMeshes );

我的自定义材质运行良好，让我可以在每个顶点上使用不透明度。每架飞机都已创建，一切正常。

问题是，当我渲染场景时，每个平面行上都有一些奇怪的线条，这是一个完整的工作 Codepen：Codepen link

你看到那里的那些对角线了吗？你能告诉我发生了什么吗？我没有找到它们的来源。

提前谢谢你！

Answer 1

您看到对角线的原因是因为您使用的是THREE.TriangleStripDrawMode，所以最右边的三角形与下一行最左边的三角形共享顶点。您会看到一个非常拉长的三角形横切。

要解决此问题，请删除分配TriangleStripDrawMode 的行，这将恢复为每个三角形三个顶点的默认设置（不共享顶点）。

问题 2：

每次迭代的第一个三角形按顺时针顺序绘制，但每次迭代的第二个三角形按逆时针顺序绘制，因此除非将顶点顺序更改为顺时针。

以下是您在 Codepen 中的方式：

// Second tri is drawn counter-clockwise
AvertexPositions.push( x,        y + 60, 0 ); //
AvertexPositions.push( x + 80,   y + 60, 0 ); // Second triangle of a plane
AvertexPositions.push( x + 80,   y,      0 );

应该是这样的：

// Now, it is clockwise, matching first tri
AvertexPositions.push( x,        y + 60, 0 ); //
AvertexPositions.push( x + 80,   y,      0 ); //
AvertexPositions.push( x + 80,   y + 60, 0 ); // Second triangle of a plane

以相同的缠绕顺序绘制所有三角形非常重要。否则，有的朝前，有的朝后。您可以选择渲染哪一侧，或使用Materials.Side 渲染两侧