前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >threeJS中,那些会让阴影失效的操作

threeJS中,那些会让阴影失效的操作

作者头像
黒之染
发布2018-10-19 14:28:32
4.8K2
发布2018-10-19 14:28:32
举报

本来以为不就设一个阴影嘛,网上这么多文章,随便看一篇就知道怎么设置了,然而我却花了整整一天才让阴影出现...

很多博主说,在threeJS中要让阴影显示,只要满足以下几个基本条件。

  1. 渲染器开启阴影渲染:renderer.shadowMapEnabled = true;
  2. 灯光需要开启“引起阴影”:light.castShadow = true;
  3. 物体需要开启“引起阴影”和“接收阴影”:mesh.castShadow = mesh.receiveShadow = true;

然而,没学webGL直接撸THREE的初学者(我)有时候却怎么都弄不出阴影,摸索了一天之后才发现,原来除了以上基本条件,还有很多其它的条件...少有博主把这些高级条件一次性列完,不过这位博主列出的则足够全面,但是所用的threeJS版本过旧

以下列出我遇到过的情况:

马赛克阴影

在点光源下的阴影都是马赛克,开启 renderer.shadowMapType=THREE.PCFSoftShadowMap; 可有效减少马赛克,但不如用平行光的阴影完美。好在很少用点光源,晚一点再摸索一下

平行光

对于平行光,还需要设置 light.shadow.camera 下的这6个属性:nearfarleftrighttopbottom。使阴影在这6个面描述的范围内才能显示,否则可能只显示一部分或者不显示阴影,如下图

clipboard.png
clipboard.png

可以试试不设置这6个值,打印一下它们分别的默认值,特别小!物体挪远一点就没有阴影了。

要说明这6个属性,还要先说light.shadow.camera,这是一个正交摄像机(OrthographicCamera),与光源同一位置和朝向。这6个值一起设置了这个摄像机的可视区域,只有在可视区域内的物体才能产生投影与被投影。这6个值的说明在threeJS文档的正交相机就有

题外话,最近玩手游吃鸡,里面的阴影离人物远的地方是不会显示的,只会显示人物附近10米内的阴影,估计就是这6个值设置的了吧。

并不是所有灯光都能引起阴影

这4种可以:DirectionalLightPointLightRectAreaLightSpotLight

并不是所有材质都可以接收引起阴影

我也没全部试过,试过可以的有:MeshLambertMaterial

不能把光源的position设为单位向量

如:light.position.set(-40, 60, -10).normalize() 添加光源的时候一般都会给光源设置一个位置,但是如果顺手把这个位置设成单位向量了,那会出现怪异的问题:平行光下,有的物体能投阴影,有的球体却不行,当时思考了很久怎么回事。但后来发现,并不是阴影失效了,应该是它导致了上面提到的阴影摄像机的范围发生了变化

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 马赛克阴影
  • 平行光
  • 并不是所有灯光都能引起阴影
  • 并不是所有材质都可以接收引起阴影
  • 不能把光源的position设为单位向量
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档