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

Question

我尝试使用以下代码创建一个包含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));

当我渲染对象时，只有一个三角形呈现（第一个）。如果有人可以告诉我出了什么问题（或者没有搅拌机创建自定义网格的指南），那就太棒了。

Answer 1

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

Answer 2

面部缠绕是不同的，第一个三角形是逆时针，第二个三角形则是顺时针方向。您可以通过两种不同的方式解决问题 -

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

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

2）渲染三角形的两边。

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