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

CKJOKER 发布于2019-08-22 18:08 / 2520人阅读

摘要：但后来发现，并不是阴影失效了，应该是它导致了上面提到的阴影摄像机的范围发生了变化

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

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

渲染器开启阴影渲染：renderer.shadowMapEnabled = true;

灯光需要开启“引起阴影”：light.castShadow = true;

物体需要开启“引起阴影”和“接收阴影”：mesh.castShadow = mesh.receiveShadow = true;

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

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

马赛克阴影

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

平行光

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

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

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

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

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

这4种可以：DirectionalLight、PointLight、RectAreaLight、SpotLight

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

我也没全部试过，试过可以的有：MeshLambertMaterial

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

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

GPU云服务器云服务器服务器操作系统有那些服务器操作系统由那些进程关于JAVA中顺序IO的基本操作会让

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95540.html

Threejs之 .obj 模型投影

摘要：今天做项目的时候发现中模型投影与的投影有一点不同，写个文章记录一下，防止忘记，也希望能够帮到大家如果对你的问题产生了帮助，就请点个赞吧原理模型投影的方法是通过遍历中的元素，并给他们设置和核心代码创建模型的完整代码生成汽车模型这种方式没有今天做项目的时候发现threejs中.obj模型投影与geometry的投影有一点不同，写个文章记录一下，防止忘记，也希望能够帮到大家！如果对你的问题...

xavier 2019-08-26 10:15 评论0 收藏0
three.js 简介

摘要：对于自身不能发光的物体，需要给场景添加光源从而达到可视的效果。中渲染阴影的开销比较大，所以默认物体是没有阴影的，需要单独开启。主要用于检测动画运行时的帧数，可以显示表示每秒多少帧和每帧多少毫秒，越大越好，但太大会影响性能，一般为左右。一、WebGL 与 three.js WebGL（Web Graphics Library）是一种3D绘图协议，它允许把JavaScript和OpenG...

yankeys 2019-08-22 15:14 评论0 收藏0
H5实例教学--ThreeJs 实现粒子动画飘花效果

摘要：我们还需要在粒子超出效果展示区域时，把粒子重新赋予一个初始位置这样，飘花瓣的效果，就完成了代码下载链接密码 showImg(https://segmentfault.com/img/bVKwfR?w=329&h=565); 粒子动画在ThreeJs可以用几种方式实现本次样例使用Sprite类来构建粒子官方对Sprite类的解释 Sprite A sprite is a plane t...

Andrman 2019-08-21 11:37 评论0 收藏0
H5实例教学--ThreeJs 实现粒子动画飘花效果

摘要：我们还需要在粒子超出效果展示区域时，把粒子重新赋予一个初始位置这样，飘花瓣的效果，就完成了代码下载链接密码 showImg(https://segmentfault.com/img/bVKwfR?w=329&h=565); 粒子动画在ThreeJs可以用几种方式实现本次样例使用Sprite类来构建粒子官方对Sprite类的解释 Sprite A sprite is a plane t...

GitCafe 2019-08-01 16:28 评论0 收藏0