Three.js - 使用MeshFaceMaterial创建阴影

时间:2015-05-06 18:04:13

标签: javascript three.js

我现在尝试了几种不同的灯光(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文件中的材料示例。

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

谢谢。

1 个答案:

答案 0 :(得分:1)

MeshFaceMaterial只是一组材料。因此,如果您的materials变量包含MeshLambertMaterialMeshPhongMaterial,那么您应该没问题。阴影将从DirectionalLightSpotLight生成。

请确保您的渲染器具有:

renderer.shadowMapEnabled = true;

你的光已经:

light.castShadow = true;

你的每个网格:

mesh.castShadow = true;

并且您至少有一个对象(例如一个平面):

plane.receiveShadow = true;