三种JS Phong材料在定制网格上不显示与环境光均匀

Question

这里，我通过形成一个网格来创建一个内线对象，然后应用一个MeshPhongMaterial。

设置了我的场景，并创建了一个网格对象，在其中我应用Phong材料。然而，材料本身并不明显。

1. 这可能是因为我创建顶点的方式吗？也许材料中有一种复杂性(尝试添加线框来查看复杂性)
2. 我增加了场景和环境照明。

我做了一个这里的演示。下面是材料本身的片段

const material = new THREE.MeshPhongMaterial({
    color: 0xFF0000,    // red (can also use a CSS color string here)
    shininess: 150,
    side: THREE.DoubleSide,
    metalness: 0.5,
    emissive: 'red'
});

Answer 1

这是因为你的几何学没有法线，PhongMaterial需要法线来计算它的颜色。只需在您的[0, 0, 1]函数中添加默认的xyzSet()正常值，就可以呈现您期望的红色：

g.normals[ posIdx ]  = 0;
g.normals[ posIdx + 1 ]  = 0;
g.normals[ posIdx + 2 ]  = 1.0;

​

​