使用THREE.js创建自定义网格

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

我尝试使用以下代码创建一个包含Three.js的自定义网格:

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.

当我渲染对象时,只有一个三角形呈现(第一个)。如果有人可以告诉我什么是错的(或者没有搅拌机创建自定义网格的指南),那将是非常棒的。

2 个解决方案

#1

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 -

1)以正确的顺序提供顶点 -

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.

2)渲染三角形的两边。

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

#2

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

尝试调用geom.computeFaceNormals();添加顶点和面后。

#1