Here's the complete code snippet:
My goal is to create triangles and assign colors to each vertex. However, I'm encountering an issue where certain triangles are not being displayed when specific coordinates are set.
// Attempting to render 20 triangles but only 5 are visible on the screen
for (var i=0; i<20; i++) {
drawTriangle(
[[4, 10], [1, 5 + i], [10, 10]], // coordinates
[0x00ff00, 0xaa0000 + i*256*100, 0x555555 + i*256*100] // colors
);
}
var triangles = new THREE.Mesh( geometry, material );
scene.add(triangles);
renderer.render(scene, camera);
...
function drawTriangle(coords, colors) {
// Triangle counter
if (typeof this.cnt == 'undefined')
this.cnt = 0;
var p1 = new THREE.Vector3(coords[0][0], coords[0][1], 1);
var p2 = new THREE.Vector3(coords[1][0], coords[1][1], 1);
var p3 = new THREE.Vector3(coords[2][0], coords[2][1], 1);
geometry.vertices.push( p1 );
geometry.vertices.push( p2 );
geometry.vertices.push( p3 );
geometry.faces.push( new THREE.Face3( this.cnt*3, this.cnt*3+1, this.cnt*3+2 ) );
geometry.faces[this.cnt++].vertexColors = [
new THREE.Color(colors[0]),
new THREE.Color(colors[1]),
new THREE.Color(colors[2])
];
}