CODEWITHSUNDEEP
javascriptarraysthree.js
gja2nd
gja2nd

Reputation: 21

Create Three.js Triangles from Vertices array with a function - three.js

I'm new to JS, THREE.js and want to make a function that takes:

Here's what I have so far:

// An empty Array to store all the Triangles
   var triangles = [];

//  pos is an array that holds all the points/vertices -- there's 72 values total 
   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.

// Make a new triangle Object
    tri = new THREE.Triangle(ta, tb, tc);
 

// Add new triangle to initial "triangles" array
    triangles.push(tri);
    
   }
}
makeTriangle(triangles);  
console.log(triangles); // returns [Triangle, Triangle, Triangle]

How do I make the every 3 instances inside the for loop work? As of right now instead of 0,1,2 / 3,4,5 /6,7,8 it's giving 0,3,6,9, etc.

Upvotes: 1

Views: 929

Answers (1)

gja2nd
gja2nd

Reputation: 21

I was actually able to find a solution via the three.js Discourse here. Hope this can help anyone else!

var triangles = [];
var pos = threeMesh1.geometry.attributes.position;

var a = new THREE.Vector3(); // for re-use
var b = new THREE.Vector3(); // for re-use
var c = new THREE.Vector3(); // for re-use
// var normals = [];
var faces = pos.count / 3; // count = 8 triangles

function makeTriangle() {
for (let i = 0; i < faces; i++){
var tri = new THREE.Triangle(); // for re-use
  a.fromBufferAttribute(pos, i * 3 + 0);
  b.fromBufferAttribute(pos, i * 3 + 1);
  c.fromBufferAttribute(pos, i * 3 + 2);
  tri.set(a, b, c);
//   let n = new THREE.Vector3();
//   tri.getNormal(n);
  let area_sum = tri.getArea();
//   normals.push(n);

  // Add new triangle to initial "triangles" array
    triangles.push(tri);
    console.log(area_sum);
    }   
    
}  
makeTriangle(triangles);  
console.log(triangles); // returns [Triangle, Triangle, Triangle]

Upvotes: 1

Related Questions