创建自定义与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

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

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

Answer 2

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