Three.js - Strange lines on custom mesh

Question

I'm trying to make a custom mesh in order to have a lot of customizable planes in the scene.

Here is some code:

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

My custom material is working fine and let me to use opacity on every vertex. Every plane is created and everything works fine.

The problem is that, when I render the scene, there are some strange lines on every planes row, here's a full working Codepen: Codepen link

Do you see those diagonal lines there? Are you able to tell me what's happening? I didn't find their origin.

Thank you in advance!

Answer 1

The reason you're seeing diagonals is because you're using THREE.TriangleStripDrawMode , so the rightmost triangles share vertices with the leftmost triangles of the next row. You're seeing a really stretched out triangle cut across.

To solve this, get rid of the line where you're assigning TriangleStripDrawMode , which will go back to the default of three vertices per triangle (no sharing of vertices).

Problem 2:

The first triangle on each iteration is being drawn in a clockwise order, but the second triangle on each iteration is being drawn in a counter-clockwise order, so you will not see the second one unless you change the vertex order to be clockwise.

Here's how you have it in your 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 );

This is how it should be:

// 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

It is important to draw all your triangles in the same winding order. Otherwise, some will be facing forward, and some will be facing backward. You can choose which side gets rendered, or render both sides with Materials.Side