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

我的自定义 material 工作正常，让我在每个顶点上使用不透明度。每个平面都已创建，一切正常。

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

你看到那些对角线了吗？你能告诉我发生了什么事吗？我没找到他们的出处。

提前致谢！

Answer 1

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

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

问题二：

每次迭代的第一个三角形按顺时针顺序绘制，但每次迭代的第二个三角形按逆时针顺序绘制，因此除非更改顶点顺序，否则您将看不到第二个三角形顺时针

这是您在 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 - 自定义网格上的奇怪线条

Three.js - Strange lines on custom mesh

javascript

3d

rendering

mesh