Rendering custom geometry in Three.js

Question

I am trying to draw a quad between four vertices in the space using three.js. I have written the following code but it doesn't work:

var a = { x:10,
            y:10}
var b = {x:50,
           y:50}

var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y - 60, 2 ) );
geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.faces.push( new THREE.Face3(0,1,2) );
geometry.computeFaceNormals();
var material = new THREE.MeshBasicMaterial({ color: "0xff1100"});
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);

where am I making a mistake? By the way, to render quads, can I use Face4 or do I have to use Face3? Is there any good source for learning webgl features all in one place? Three.js documentation is very well organized and complete.

WestLangley WestLangley · Accepted Answer · 2013-09-30T02:27:53

Quads are no longer supported. You need to use two Face3s, like so:

var a = { x:10,
          y:10 }
var b = { x:50,
          y:50 }

var geometry = new THREE.Geometry();

geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( a.x, b.y, 2 ) );

geometry.faces.push( new THREE.Face3( 0, 1, 2 ) ); // counter-clockwise winding order
geometry.faces.push( new THREE.Face3( 0, 2, 3 ) );

geometry.computeFaceNormals();
geometry.computeVertexNormals();

Tip: set material.side = THREE.DoubleSide so both sides of your geometry render. You can set it back to THREE.FrontSide when you are sure your geometry is correct.

For advice on learning three.js and WebGL see Learning WebGL and three.js

three.js r.70

Rendering custom geometry in Three.js

1 Answers