ThreeJS材质有阴影但没有灯光

Question

我想要一种材料:

• 纹理
• 没有接收灯
• 接收阴影

我尝试使用以下库材料:

• MeshBasicMaterial:不支持阴影
• MeshLamberMaterial:如果禁用灯光(material.lights = false),它也会禁用阴影
• ShadowMaterial:不支持纹理

是自定义ShaderMaterial实现它的唯一途径吗？

Answer 1

在three.js中,就像在现实生活中一样,阴影是没有光.因此,对于内置的three.js材质来接收阴影,它必须响应光线.

但是,您可以使用几行代码修改内置材质的着色器以实现所需的效果.这是一个让你入门的例子:

THREE.ShaderLib[ 'lambert' ].fragmentShader = THREE.ShaderLib[ 'lambert' ].fragmentShader.replace(

    `vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance;`,

    `#ifndef CUSTOM
        vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance;
    #else
        vec3 outgoingLight = diffuseColor.rgb * ( 1.0 - 0.5 * ( 1.0 - getShadowMask() ) ); // shadow intensity hardwired to 0.5 here
    #endif`

);

然后,使用它:

var material = new THREE.MeshLambertMaterial( { map: texture } );
material.defines = material.defines || {};
material.defines.CUSTOM = "";

尽管它的名字,这种材料会表现得像MeshBasicMaterial,但是当它在阴影中时会变暗.此外,MeshLambertMaterial仍将按预期工作.

three.js r.88