I am attempting to create a unique mesh design to incorporate multiple customizable planes within the scene.
Below is an example of the code I am using:
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 wireframes for 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 );
// Generate planes and include them in the scene
planeMeshes = new THREE.Mesh( geometry, material );
planeMeshes.setDrawMode( THREE.TriangleStripDrawMode );
scene.add( planeMeshes );
The custom material functions correctly, enabling me to apply opacity to each vertex. All planes are successfully created without any issues.
However, upon rendering the scene, unusual diagonal lines appear on each row of planes. For a visual representation, please refer to this Codepen link: Codepen link
Have you noticed these diagonal lines? Could you provide insight into what might be causing this issue? I have been unable to identify their source.
Thank you for your help!