Three.js 设置面部颜色

Question

我想设置脸的颜色但是失败了。如果我使用 wireframe，结果似乎是正确的。但是如果没有，人脸好像没有渲染出来

var geo = new THREE.Geometry();
geo.vertices.push(new THREE.Vector3(1, 1, 0));
geo.vertices.push(new THREE.Vector3(1, 0, 0));
geo.vertices.push(new THREE.Vector3(0, 0, 0));
geo.faces.push(new THREE.Face3(0, 1, 2));
geo.faces[0].color = new THREE.Color('rgb(0,255,0)');
var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({
    vertexColors: THREE.FaceColors,
    color: 0xff0000//,
    //wireframe: true
}));
scene.add(mesh);

这是演示：http://jsfiddle.net/yaxpberz/ .

Answer 1

原来按照添加到face时的顶点顺序，camera是看mesh的背面。所以，可以这样解决：

var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors,
    color: 0xff0000,
    side: THREE.BackSide
}));

Answer 2

您正在按顺时针方向添加顶点。您应该逆时针添加它们。交换第一个和第三个顶点。这样您就可以避免两次绘制面孔的性能开销。

Three.js 设置面部颜色

Three.js set face color

javascript

three.js