Basic 2D colored triangle using three.js

Question

I am having issues creating a simple 2D scene with Three.js. I would like to create a 2D view on a colored triangle. I am not able to make the triangle colored (eg. red). I believe that I will need the following for that:

• THREE.OrthographicCamera
• simple triangle -> i.e. THREE.Geometry() colored in red

I do not want any shadows, just a simple red 2D triangle in the orthographic scene.Any suggestions on how to make it are welcome.

Answer 1

If you are going to use the base Geometry class you need to add all your own vertices to the scene. You can do this with the Vertex class like so

var geometry = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);   // Vector3 used to specify position
var v2 = new THREE.Vector3(1,0,0);
var v3 = new THREE.Vector3(0,1,0);   // 2d = all vertices in the same plane.. z = 0

// add new geometry based on the specified positions
geometry.vertices.push(v1);
geometry.vertices.push(v2);
geometry.vertices.push(v3);

We then need to construct a face from our vertices, you pass in the indices of the vertices in the order they are pushed above..

[EDIT]: As mrdoob points out below, you also need to add them in counter clock-wise order.

This was the problem with my fiddle. You can view the fixed demo here.

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

Finally create a material and combine it with your geometry to create a Mesh. Even for 2D I believe you are required to create a mesh in order to display this.

var redMat = new THREE.MeshBasicMaterial({color: 0xff0000});
var triangle = new THREE.Mesh(geometry, redMat);
scene.add(triangle)                               // added at the origin