三个 JS Phong Material 即使在自定义网格上使用环境光也没有显示

Question

在这里，我通过形成一个网格来创建一个带衬里的对象，然后应用一个 MeshPhongMaterial。

已设置好我的场景，并创建了一个我应用 Phong Material 的网格对象。然而 material 本身并不明显。

这可能是我创建顶点的方式造成的吗？也许 material 中存在复杂性（尝试添加线框以查看复杂性）
我添加了场景和环境照明。

我做了一个demo of this here。这是 material 本身的片段

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 需要法线来计算它的颜色。只需在 xyzSet() 函数中添加默认的 [0, 0, 1] 法线即可呈现您期望的红色：

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

三个 JS Phong Material 即使在自定义网格上使用环境光也没有显示

Three JS Phong Material not showing even with Ambient Light on Custom Mesh

graphics

three.js