javascript - Three.js - 使用 MeshFaceMaterial 创建阴影

Question

我现在尝试了几种不同的光源(Directional、Spot、Point)，但它们都没有在 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 文件中的 Material 示例。

"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
}

谢谢。

Answer 1

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

只需确保您的渲染器具有:

renderer.shadowMapEnabled = true;

你的灯有:

light.castShadow = true;

每个网格:

mesh.castShadow = true;

并且您至少有一个对象(例如一架飞机)，您可以在其中执行以下操作:

plane.receiveShadow = true;