Three.js 在 ShaderMaterial 上没有阴影答案

【问题标题】：Three.js no shadows on ShaderMaterialThree.js 在 ShaderMaterial 上没有阴影
【发布时间】：2020-07-19 23:15:53
【问题描述】：

我正在使用three.js 创建地形编辑器，但遇到了一些问题。第一的。阴影在 MeshLambertMaterial 上渲染，但不会在 ShaderMaterial 上渲染。第二。如何在运行时更改对象的材质（从 Lambert 到着色器）？这是我的编辑器的演示：http://78.62.160.169/webgl/editor/ 及源码：http://78.62.160.169/webgl/editor/script.js

【问题讨论】：

标签： three.js webgl

【解决方案1】：

LambertMaterial 是插件支持的内置材质。所以阴影插件支持在LambertMaterial上渲染，而ShaderMaterial是你自己的shader/material，应该手动开启阴影支持，默认没有设置。

切换素材：https://github.com/mrdoob/three.js/wiki/Updates

【讨论】：

好的。那么在 ShaderMaterial 上启用阴影的方法是什么？
提取生成的阴影贴图并在着色器中混合。

【解决方案2】：

这里是带有阴影和雾的 ShaderMaterial 示例

https://gist.github.com/wmcmurray/6696fc95f25bbd2401d72a74e9493261

或者您也可以从 LambertMaterial 或其他重写着色器，

让它支持你自己的着色器

【讨论】：