Creating a custom mesh with THREE.js

Question

I have attempted to create a custom mesh with Three.js using the following code:

var geom = new THREE.Geometry();

//geom verts

geom.vertices.push(new THREE.Vector3(-1,-1,-1));
geom.vertices.push(new THREE.Vector3(0,-1,-1));
geom.vertices.push(new THREE.Vector3(-1,0,-1));
geom.vertices.push(new THREE.Vector3(0,0,-1));

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

When I render the object, only one of the triangles renders (the first one). If someone could tell me what is wrong (or a guide to creating custom meshes without blender), that would be awesome.

maybe this helps as well? http://stackoverflow.com/questions/9252764/how-to-create-a-custom-mesh-on-three-js?rq=1 — Martin Schuhfuß, Aug 12 '16 at 19:47

score 0 · Answer 1 · answered Aug 11 '16 at 20:49

0

Try calling geom.computeFaceNormals(); after adding the vertices and faces.

answered Aug 11 '16 at 20:49

William Fields

1
2

score 0 · Accepted Answer · answered Aug 12 '16 at 03:34

The face winding is different, for the first triangle its anti-clockwise and for the second triangle it is clock-wise. You can solve the problem in two different ways -

1) Provide the vertices in right order -

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

2) Render both side of the triangle.

var material = new MeshBasicMaterial({side: THREE.DoubleSide});

Creating a custom mesh with THREE.js

2 Answers2