3

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.

Oldrich Svec
  • 4,191
  • 2
  • 28
  • 54

1 Answers1

4

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
Matteo
  • 7,924
  • 24
  • 84
  • 129
Cory Gross
  • 36,833
  • 17
  • 68
  • 80
  • 2
    EDIT: Thanks to mrdoob, I am informed me that THREE.Vertex is no longer supported. The vertices are pushed simply as their vector positions. – Cory Gross Jun 14 '12 at 00:42
  • Thanks for your reply. I did basically the same but I see only black color. I must be doing something wrong. Do you see it in red? – Oldrich Svec Jun 14 '12 at 16:59
  • Hm, you seem to be right. I just set up this [jsfiddle here](http://jsfiddle.net/hyvng/5/) and I am not getting color either. Not sure what is wrong. Perhaps mrdoob can give another answer about what might be wrong. If you uncomment the line so that a CubeGeometry is created instead then it renders fine. – Cory Gross Jun 14 '12 at 17:34
  • 3
    Remember to construct the polygons in [CCW](http://i.stack.imgur.com/NYP5Q.png). `new THREE.Face3(0, 2, 1)` instead of `new THREE.Face3(0, 1, 2)`. – mrdoob Jun 14 '12 at 17:56
  • Ah, yes that was the problem. Thank you again. I edited my post above to show working code as well as supplied a working demo. – Cory Gross Jun 15 '12 at 14:58
  • 3
    Demo broken again. Mind fixing it and perhaps using the WebGLRenderer instead? (much faster) – Tek May 10 '14 at 03:01
  • I just tried the demo. I think the code is fine. Console message indicated that THREE.js was unknown. Jsfiddle changed their approach to loading libraries in the last while. Go to the little Javascript gear widget and use it to add the THREE.js library and then the code will work again. – Anne Gunn Feb 15 '17 at 13:04