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 链接

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

先感谢您！

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渲染两侧