three.js - Buffergeometry 显示为黑色，带有 phongmaterial

Question

我正在尝试使用 phong Material 渲染缓冲区几何对象，但它显示为黑色。我以前使用过基本 Material ，它可以正确渲染。为了检查照明，我用 phong Material 渲染了一个立方体，它是可见的和彩色的。

我把它归结为产生错误的最小代码。我认为可能是我使用的是 facecolors 而不是顶点颜色，但我不确定。我究竟做错了什么？

此代码有效:

var cubeGeometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshPhongMaterial({color: 0x000044});
var cube = new THREE.Mesh(cubeGeometry, material);
cube.position.z = 10;
scene.add(cube);

这段用于创建缓冲区几何立方体的代码不会:

squareMat = new THREE.MeshPhongMaterial({
    color: 0x0000ff,
    vertexColors: THREE.FaceColors
});

for (i = 0; i < verts.length; i += 4) {
    //set 4 points
    a = verts[i];
    b = verts[i + 1];
    c = verts[i + 2];
    d = verts[i + 3];


    for (j = 0; j < a.length; j += 1) {
        a[j] = (a[j] * cubesize) + offsets[j];
        b[j] = (b[j] * cubesize) + offsets[j];
        c[j] = (c[j] * cubesize) + offsets[j];
        d[j] = (d[j] * cubesize) + offsets[j];
    }

    vol.vertices.push(new THREE.Vector3(a[0], a[1], a[2]));
    vol.vertices.push(new THREE.Vector3(b[0], b[1], b[2]));
    vol.vertices.push(new THREE.Vector3(c[0], c[1], c[2]));
    vol.vertices.push(new THREE.Vector3(d[0], d[1], d[2]));

    idx = i / 2;
    face1 = faces[idx];
    face2 = faces[idx + 1];
    colval = face1[3];

    facecolor = new THREE.Color(colval);

    f1 = new THREE.Face3(face1[0], face1[1], face1[2]);
    f2 = new THREE.Face3(face2[0], face2[1], face2[2]);
    f1.color = facecolor;
    f2.color = facecolor;
    vol.faces.push(f1);
    vol.faces.push(f2);
}
bufferVol = new THREE.BufferGeometry().fromGeometry(vol);
volMesh = new THREE.Mesh(bufferVol, squareMat);
scene.add(volMesh);

Answer 1

它缺少法线。当我调用 bufferVol.computeVertexNormals();它的工作。谢谢马丁!