前言
众所周知作为webgl的插件，three.js肯定没有原生webgl那样，添加一个阴影这么费劲。所以，经过一小时的研究（笨人不聪明，已经是极限速度了）。终于将阴影效果做了出来，并且还发现一些容易犯错的地方。话不多说了，来一起看看详细的介绍吧。
先上效果图：
实现这个效果其实很简单，只需要设置几个属性就可以实现当前的效果。而上面的材质问题我将放到下一节：
（1）首先需要告诉渲染器我需要阴影，你给我生成阴影：
rush:js;">
renderer.shadowMap.enabled = true;
（2）然后告诉灯光，我需要阴影：
rush:js;">
light.castShadow = true;
（3）告诉模型哪些需要投射阴影：
rush:js;">
//告诉球需要投射阴影
sphere.castShadow = true;
//告诉立方体需要投射阴影
cube.castShadow = true;
（4）最后告诉最底下的平面长方形你要接受阴影：
rush:js;">
plane.receiveShadow = true;
上面四步只要设置好了，就可以实现阴影的效果了。
注意事项：你的模型的材质一定要选择对灯光有反应的材质，要不然不会出现效果，就是因为这个问题导致好长时间没有整出来阴影。
案例全部代码：
rush:xhtml;">
<Meta charset="UTF-8">
Title
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Three.js具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
