CODEWITHSUNDEEP
javascriptwebglthree.js
Oldrich Svec
Oldrich Svec

Reputation: 4231

Basic 2D colored triangle using three.js

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:

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.

Upvotes: 3

Views: 8018

Answers (1)

Cory Gross
Cory Gross

Reputation: 37206

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.

enter image description here

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

Upvotes: 4

Related Questions