How to use Three.Triangle() in three.js

Question

Three.js has function called THREE.Triangle() and I would like to know how to use it.

Answer 1

I suspect the Triangle class may not be what you are expecting it to be; it is not a class to be used directly for drawing simple 2D Triangles.

---

The Triangle class is a math utility function for encapsulating triangles and doing calculations, which is useful when drawing surfaces.
A good more detailed explanation for usage of triangles in drawing surfaces: Why do 3D engines primarily use triangles to draw surfaces?

---

If you are just trying to draw a simple 2D triangle:

var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(30,0,0);
var v3 = new THREE.Vector3(30,30,0);

geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();

var mesh= new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );

Another StackOverflow answer for this: Basic 2D colored triangle using three.js

---

Equivalent code using the Triangle class:

var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(30,0,0);
var v3 = new THREE.Vector3(30,30,0);

var triangle = new THREE.Triangle( v1, v2, v3 );
var normal = triangle.normal();

// An example of getting the area from the Triangle class
console.log( 'Area of triangle is: '+ triangle.area() );

geom.vertices.push(triangle.a);
geom.vertices.push(triangle.b);
geom.vertices.push(triangle.c);

geom.faces.push( new THREE.Face3( 0, 1, 2, normal ) );

jsbin link to play with: http://jsbin.com/zatejelika/1/edit?html,css,js,output
Triangle class documentation link: http://threejs.org/docs/#Reference/Math/Triangle