[转] ThreeJS中,那些会让阴影失效的操作
转自:https://segmentfault.com/a/1190000015330360
本来以为不就设一个阴影嘛,网上这么多文章,随便看一篇就知道怎么设置了,然而我却花了整整一天才让阴影出现...
很多博主说,在threeJS中要让阴影显示,只要满足以下几个基本条件。
- 渲染器开启阴影渲染:
renderer.shadowMapEnabled = true;//
renderer.shadowMap.enabled = 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()
添加光源的时候一般都会给光源设置一个位置,但是如果顺手把这个位置设成单位向量了,那会出现怪异的问题:平行光下,有的物体能投阴影,有的球体却不行,当时思考了很久怎么回事。但后来发现,并不是阴影失效了,应该是它导致了上面提到的阴影摄像机的范围发生了变化
[转] ThreeJS中,那些会让阴影失效的操作相关推荐
- Threejs中的Shadow Mapping(阴影贴图)
简而言之,步骤如下: 1.从灯光位置视点(阴影相机)创建深度图. 2.从相机的位置角度进行屏幕渲染,在每个像素点,比较由阴影相机的MVP矩阵计算的深度值和深度图的值的大小,如果深度图值小的话,则表示该 ...
- 第2话 Mesh对象的属性和threejs中的两种相机
构建一个"向场景中添加方块"的功能 这主要要在dat.GUI中添加按钮以控制场景中各物体对象的属性. <!DOCTYPE html> <html> < ...
- iframe中请求页面而session失效时页面跳转问题
访问相关jsp页面时,往往要先判断用户session是否失效,以便决定是继续业务,还是跳转到登录页面.这个事情我们通常是用过滤器来实现的.由过滤器判断session是否失效,由此来决定请求继续还是跳转 ...
- 解决WPF中重载Window.OnRender函数失效问题
原文:解决WPF中重载Window.OnRender函数失效问题 今天实验一个绘图算法的时候,偶然发现重载Window.OnRender的方法是没有效果的. public partial class ...
- threejs添加立方体_前端图形学(三十)——从源码去看threejs中的光照模型
欢迎来到[畅哥聊技术]前端图形学相关技术文章,更多精彩内容持续更新中,敬请关注. 上章节回顾 熟悉了threejs中内置的几何图形的渲染原理就是通过顶点渲染 传入自定义顶点渲染自定义的几何图形 本章目 ...
- threejs中坐标系转换和实现物体跟随鼠标移动
坐标系转换 下面函数可以将鼠标所在点的屏幕坐标转化成一个Threejs三维坐标: convertTo3DCoordinate(clientX,clientY){var mv = new THREE.V ...
- vue项目:this.function()中关于:this指针失效的问题
vue项目:this.function()中关于:this指针失效的问题 参考代码:第二种 案例代码 · 代码解说 · 如下: this.nullArrImg= true;//缺省图显示,表示数据为空 ...
- 解决:My97DatePicker 日期插件引用在PHP文件中maxDate和minDate控制失效问题
解决:My97DatePicker 日期插件引用在PHP文件中maxDate和minDate控制失效问题 参考文章: (1)解决:My97DatePicker 日期插件引用在PHP文件中maxDate ...
- Confluence wiki上传文件时报“不能上传文件至Confluence中,服务器可能已失效”
Confluence wiki 上传文件时报"不能上传文件至Confluence中,服务器可能已失效"的解决方法. 一. 后台管理修改配置 首先用管理员登陆Confluence后台 ...
最新文章
- mysql的主从复制原理与实现
- Python的setuptools详解【3】打包wheel并提交给pypi
- 测试用例的书写方式及测试模板大全
- OpenCASCADE:环境变量
- 怎么拆计算机主机,技术编辑教您电脑机箱怎么拆
- 接口有个电池标志_有人说手机快充毁电池,真的假的?电池快充的原理是什么?...
- java excel文件读取的内容_java读取Excel文件指定内容
- 收藏 | 让你纵横 GitHub 的五大神器
- python 把numpy.ndarray转为图像_Python 让蔡徐坤在我的命令行里打篮球?打得还不错...
- 如何让自己时刻冷静的方法_睡前如何自己丰胸 健康有效方法 成就窈窕淑女
- linux创建管道的函数,Linux下的有名管道(03)---使用函数创建和删除有名管道
- conda安装包出现conda info (package)...的解决方法
- 如何在没有安装安卓环境的mac os上装adb环境.
- CSAPP-Architecture lab
- EXCEL作曲线图,如何转成高质量的图片
- 有关Word创建英语练字模板的宏
- vue updated
- mysql修改数据的sql语句怎么写_MySQL数据库修改数据语句的简单用法
- Unity将世界坐标转为UI坐标
- PDF如何编辑,怎样替换PDF页面