ThreeJS材质有阴影但没有灯光 [英] ThreeJS material with shadows but no lights

问题描述

我想要一个材料:

• 纹理
• 收不到灯
• 接收阴影

我尝试使用以下图书馆资料:

I tried with the following library materials:

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

自定义 ShaderMaterial 是实现它的唯一方法吗?

Is a custom ShaderMaterial the only way to achieve it?

推荐答案

在three.js 中，就像在现实生活中一样，阴影是光的缺失.所以对于一个内置的three.js材质来接收阴影，它必须对光做出反应.

In three.js, as in real life, shadows are the absence of light. So for a built-in three.js material to receive shadows, it must respond to light.

但是，您可以修改内置材质的着色器，只需几行代码即可达到您想要的效果.以下是帮助您入门的示例:

However, you can modify a built-in material's shader to achieve the effect you want with just a few lines of code. Here is an example to get you started:

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 仍会按预期工作.

In spite of its name, this material will behave like MeshBasicMaterial, but will darken when it is in shadow. And furthermore, MeshLambertMaterial will still work as expected.

three.js r.88

three.js r.88

这篇关于ThreeJS材质有阴影但没有灯光的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！