使用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.

Answer 1

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

Answer 2

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});