I am diving into the world of JS and THREE.js with the goal of creating a function that performs the following tasks:
- Combine every 3 values to generate a new vertex,
- Group every 3 vertices to create a new THREE.Triangle(ta, tb, tc);
- Keep track of all these triangles in an Array
- Determine the total area of each Triangle using Triangle.getArea()
Here is the progress I have made:
// Initialize an empty Array to hold all the Triangles
var triangles = [];
// pos is an array that contains all the points/vertices -- with a total of 72 values
var pos = threeMesh1.geometry.attributes.position;
function makeTriangle(ta, tb, tc){
for (i = 0; i < pos.count; i++) {
// For *every 3 instances*, assign the values to ta, tb, tc,
ta = new THREE.Vector3( pos.getX(i), pos.getY(i), pos.getZ(i)); //posX(0),posY(0),posZ(0)
tb = new THREE.Vector3( pos.getX(i+=1), pos.getY(i+=1), pos.getZ(i+=1) );//posX(1),posY(1),posZ(1)
tc = new THREE.Vector3( pos.getX(i+=2), pos.getY(i+=2), pos.getZ(i+=2));//posX(2),posY(2),posZ(2)
//the next set should be i =(3,4,5) (6,7,8) (9,10,11), etc.
// Create a new triangle Object
tri = new THREE.Triangle(ta, tb, tc);
// Add new triangle to the original "triangles" array
triangles.push(tri);
}
}
makeTriangle(triangles);
console.log(triangles); // returns [Triangle, Triangle, Triangle]
How can I make the every 3 instances inside the for loop function correctly? Currently, instead of 0,1,2 / 3,4,5 / 6,7,8, it is giving 0,3,6,9, etc.