Three.js - 使用 MeshFaceMaterial 创建阴影答案

【问题标题】：Three.js - Creating shadows with MeshFaceMaterialThree.js - 使用 MeshFaceMaterial 创建阴影
【发布时间】：2015-05-07 04:35:37
【问题描述】：

我现在尝试了几种不同的灯光（定向、点、点），但它们都没有在 MeshFaceMaterial 对象上产生漂亮的阴影。相反，整个 MeshFaceMaterial 对象将变为黑色。

My Test Website（请持保留态度，不断变化）。

如何使用灯光在 MeshFaceMaterials 上创建阴影？ MeshFaceMaterial 是否支持阴影？ documentation 表示“使用 MeshLambertMaterial 或 MeshPhongMaterial 影响对象。”

这是我如何加载 .json 模型的示例代码。

loader.load('sample-concrete.js', function ( geometry, materials ) {  
    mesh1 = new THREE.Mesh(
        geometry, new THREE.MeshFaceMaterial( materials )
    );

    mesh1.rotation.x = -Math.PI / 2;
    scene.add( mesh1 );
});

这是我的 .json 文件中的材料示例。

"materials": [
{
"DbgIndex" : 0,
"DbgName"  : "Steel",
"colorDiffuse"  : [0.3059, 0.0471, 0.0471],
"colorAmbient"  : [0.3059, 0.0471, 0.0471],
"colorSpecular"  : [1.0000, 1.0000, 1.0000],
"transparency"  : 1.0,
"specularCoef"  : 25.0,
"vertexColors" : false
}

谢谢。

【问题讨论】：

First HemisphereLight 不支持阴影。只有DirectionalLight 和SpotLight。那么你所有的.castShadow 都是假的，所以他们永远不会投下阴影。
是的，我知道 HemisphereLight 不支持阴影。 DirectionalLight 和 SpotLight 不适用于 MeshFaceMaterial。
在我看来它是在投射阴影。 @gaitat，你应该把你的评论作为我认为的答案。
我上面关于 DirectionalLight 和 SpotLight 不起作用的评论是不正确的。他们似乎确实在工作。

标签： javascript three.js

【解决方案1】：

MeshFaceMaterial 只是材料的集合。因此，如果您的 materials 变量包含 MeshLambertMaterial 或 MeshPhongMaterial 您应该没问题。阴影将从DirectionalLight 或SpotLight 生成。

只要确保您的渲染器具有：

renderer.shadowMapEnabled = true;

你的灯有：

light.castShadow = true;

每个网格：

mesh.castShadow = true;

你至少有一个物体（例如一架飞机）在你做的地方：

plane.receiveShadow = true;

【讨论】：

这个正确答案。我关掉了窗户的阴影。
实际上我现在注意到的是 MeshFaceMaterial 总是按预期投射阴影。但是，有时 MeshFaceMaterial 会完全变黑。我不确定是不是因为我正在使用 JSONLoader（Doob 先生正在考虑弃用它）。着色器在我的 iPhone 上正常工作。 iPad 和 Macbook Air。但在 Chrome 和 Firefox 中，我的联想 W520 上的物体似乎全黑。但它确实适用于 IE。
所以联想不支持其他功能或扩展。您可能想查看webglreport.com 以了解每台机器支持的内容。