彩色自定义几何体上的 FlatShading

Question

只要我将自己的顶点推到一个几何体上，该几何体就会变成纯色，而不是有彩色阴影。

将此代码应用于名为 mesh 的 THREE.PlaneGeometry 会产生以下阴影：

var light = new THREE.DirectionalLight(0xffffff, 1);
light.castShadow = true;
light.shadowDarkness = 0.5;
// ..
THREE.MeshLambertMaterial({ color: 0x66e6b0, shading: THREE.FlatShading });
// ...
mesh.receiveShadow = true;
mesh.castShadow = true;

但是，当我将相同的代码应用于具有 自定义顶点和面 的 THREE.Geometry() 时，几何图形为纯黑色。如何为自定义几何体赋予与平面几何体相同的阴影？

我可以使用 THREE.MeshBasicMaterial，但是脸上不再有阴影。
使用 vertexColors: THREE.FaceColors 并给每张脸着色仍然是全黑。
A THREE.AmbientLight 给出了颜色，但是脸上没有阴影。

这里是 fiddle 随机生成的全是相同颜色的面孔。相反，我希望它们有不同的阴影，因为它们的角度不同（如上图所示）。

Answer 1

产生这种效果的不是阴影，而是 z 坐标。在你的 jsfiddle 中，你所有的三角形都在 xy 平面上，所以它们都具有相同的法线。所以他们的照明是一样的。所以如果你这样打电话：

geometry.vertices.push(new THREE.Vector3(Math.random() * 100, Math.random() * 100, Math.random() * 100));

还有light.castShadow = false;因为它对任何事情都没有贡献，所以你会得到你想要的变化。

Answer 2

当附加到几何体的顶点的任何初始坐标具有未定义值时，就会出现几何体全黑的问题.

Even 如果显示几何图形，动画，并且没有抛出错误，如果 THREE.Vector3 的初始坐标未定义，THREE.MeshLambertMaterial 着色不会工作。

这个问题在 fiddle 中得到了证明，其中 undefined_variable 的使用防止了彩色阴影，并且只产生了纯色。

为了处理这个问题，将所有顶点初始化为任意值，即 new THREE.Vector3(0, 0, 0) 和然后使用 animate().

中的变量值

彩色自定义几何体上的 FlatShading

FlatShading on colored custom geometry

shader

three.js