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

渲染双方

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

1 个答案: