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

事实证明，根据添加到脸部的顶点顺序，相机正在观察网格的背面。所以，它可以通过以下方式解决：

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

Answer 2

您正以顺时针方式添加顶点。你应该逆时针添加它们。切换第一个和第三个顶点。这样，您可以避免两次绘制面部的性能开销。

Three.js设置了面部颜色

2 个答案: