Three.js - 光源使用详解2(聚光灯 SpotLight、平行光 DirectionLight)
三、THREE.SpotLight(聚光灯光源)
1,基本介绍
- THREE.SpotLight 是一种具有锥形效果的光源,该光源拥有产生光的方向和角度。我们可以将其与手电筒或者灯笼产生的光进行对比。
- THREE.SpotLight 是最常使用的光源之一,特别是如果我们想要使用阴影的话。
2,属性介绍
- angle:角度。即光源发射出的光束的宽度。单位是弧度,默认值:Math.PI/3
- castShadow:投影。如果设置为 true,这个光源就会生成阴影。
- color:光源颜色。
- distance:光源照射的距离。默认值为 0,这意味着光线强度不会随着距离增加而减弱。
- exponent:光强衰减指数。使用 THREE.SpotLight 光源,发射的光线的强度随着光源距离的增加而减弱。exponent 属性决定了光线强度递减的速度。使用低值,从光源发出的光线将到达远处的物体,而使用高值,光线仅能到达非常接近 THREE.SpotLight 光源的物体。
- intensity:光源照射的强度。默认值:1
- onlyShadow:仅阴影。如果此属性设置为 true,则该光源只生成阴影,而不会在场景中添加任何光照。
- position:光源在场景中的位置
- shadow.bias:用来偏置阴影的位置。当你使用非常薄的对象时,可以使用它来解决一些奇怪的效果。如果你看到奇怪的阴影效果,将该属性设置为很小的值(例如 0.01)通常可以解决问题。此属性的默认值为 0。
- shadow.camera.far:投影远点。表示到距离光源的哪一个位置可以生成阴影。默认值:5000
- shadow.camera.fov:投影视场。表示用于生成阴影的视场有多大。默认值:50
- shadow.camera.near:投影近点。表示距离光源的哪一个位置开始生成阴影。默认值为 50
- shadow.map.width 和 shadow.map.height:阴影映射宽度和阴影映射高度。决定了有多少像素用来生成阴影。当阴影具有锯齿状边缘或看起来不光滑时,可以增加这个值。在场景渲染之后无法更改。两者的默认值均为:512
- target:目标。使用 THREE.SpotLight 光源时,它的指向很重要。使用 target 属性,你可以将 THREE.SpotLight 光源指向场景中的特定对象或位置。注意,此属性需要一个 THREE.Object3D 对象(如 THREE.Mesh)。
- visible:是否可见。如果该属性设置为 true(默认值),该光源就会打开。如果设置 false,光源就会关闭。
3,基本用法
(1)创建聚光灯光源非常简单,只要指定颜色(并设置相关属性),然后添加到场景中即可。要特别注意如下几个属性:
- castShadow:如果想要阴影,该属性要设置为 true。
- target:该属性决定光源照射的位置。这里我们将其指向 plane 对象(地板)。
1 2 3 4 5 |
|
(2)如果我们不想将 target 瞄准一个特定的对象,而是空间中的任意一点。可以通过创建一个 THREE.Object3D() 对象来实现。
1 2 3 4 5 6 7 8 9 10 11 |
|
4,阴影相关用法
(1)除了告诉光源要生成阴影外,还必须通过配置每个几何体的 castShadow 和 receiveShadow 属性来告诉几何体对象是否接收或投射阴影。
1 2 3 4 5 |
|
(2)配合使用 THREE.CameraHelper,我们可以把用来决定阴影的光照区域显示出来,方便调试。
1 2 |
|
(3)如果想要阴影更加柔和,可以在 THREE.WebGLRenderer 对象上设置不同的 shadowMap.type 属性值:
- THREE.PCFShadowMap:默认阴影
- THREE.PCFSoftShadowMap:更加柔和的阴影
1 2 3 4 5 |
|
四、THREE.DirectionLight(平行光)
1,基本介绍
- THREE.DirectionLight 可以看作是距离很远的光,它发出的所有光线都是相互平行的。平行光的一个范例就是太阳光。
- 平行光不像上面的聚光灯(通过 distance 和 exponent 属性来微调)那样离目标越远越暗淡。被平行光照亮的整个区域接受到的光强是一样的。
2,属性介绍
- position:光源在场景中的位置。
- target:目标。使用 THREE.DirectionLight 光源时,它的指向很重要。使用 target 属性,你可以将 THREE.SpotLight 光源指向场景中的特定对象或位置。注意,此属性需要一个 THREE.Object3D 对象(如 THREE.Mesh)。
- intensity:光源照射的强度。默认值:1
- castShadow:投影。如果设置为 true,这个光源就会生成阴影
- onlyShadow:仅阴影。如果此属性设置为 true,则该光源只生成阴影,而不会在场景中添加任何光照。
- shadow.camera.near:投影近点。表示距离光源的哪一个位置开始生成阴影。
- shadow.camera.far:投影远点。表示到距离光源的哪一个位置可以生成阴影。
- shadow.camera.left:投影左边界。
- shadow.camera.right:投影右边界。
- shadow.camera.top:投影上边界。
- shadow.camera.bottom:投影下边界。
- shadow.map.width 和 shadow.map.height:阴影映射宽度和阴影映射高度。决定了有多少像素用来生成阴影。当阴影具有锯齿状边缘或看起来不光滑时,可以增加这个值。在场景渲染之后无法更改。两者的默认值均为:512
3,基本用法
(1)对于 THREE.DirectionLight 来说,由于所有的光线都是平行的,所以不会有光锥,而是一个立方体区域。下面代码我们配合 THREE.CameraHelper 对象,将用来决定阴影的光照区域显示出来,方便调试。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
(2)有时我们不想将 target 瞄准一个特定的对象,而是空间中的任意一点。可以通过创建一个 THREE.Object3D() 对象来实现。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
3,shadowCascade 属性介绍
- THREE.DirectionLight 还有一个特有的属性:shadowCascade。当我们需要使用 THREE.DirectionLight 在一个很大的区域设置阴影时,这个属性可以帮助创建更好的阴影效果。
- 该属性默认为 false。如果将这个属性设置为 true,Three.js 会使用一个替代方法来生成阴影。它将阴影的生成分裂为由 shadowCascadeCount 指定的值。这将导致靠近摄相机视点会产生更具细节的阴影,而远离摄像机视点阴影的细节更少。
- 要使用这个选项需要尝试设置一下属性:shadowCascadeCount、shadowCascadeBias、shadowCascadeWidth、shadowCascadeHeight、shadowCascadeNearZ 和 shadowCascadeFarZ 属性。
Three.js - 光源使用详解2(聚光灯 SpotLight、平行光 DirectionLight)相关推荐
- Three.js - 光源使用详解1(环境光 AmbientLight、点光源 PointLint)
Three.js 中有许多不同种类的光源,每种光源都有特别的行为和用法.下面通过一个系列文章介绍它们的用法. 一.THREE.AmbientLight(环境光) 1,基本介绍 在创建 THREE.Am ...
- 【three.js:语法】光源使用详解2-3(聚光灯 SpotLight、平行光 DirectionLight 、环境光 HemisphereLight、镜头光晕 LensFlare)
注意点:SpotLight.target 的使用. 1.SpotLight.target= object 或者是 THREE.Object3D()才行.不能只是一个position. 2.target ...
- js_long.php,protobuf.js 与 Long.js的使用详解
这次给大家带来protobuf.js 与 Long.js的使用详解,是急用protobuf.js 与 Long.js的注意事项有哪些,下面就是实战案例,一起来看一下. protobuf.js的结构和w ...
- 《Node.js开发实战详解》学习笔记
<Node.js开发实战详解>学习笔记 --持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...
- highlight.js css,JS库之Highlight.js的用法详解
下载到本地后,新建个页面测试 1.在head中加入css和js的引用 highlight hljs.initHighlightingOnLoad(); 2.添加对应要显示的内容 # 读取文件内容 de ...
- js排序算法详解-归并排序
js系列教程5-数据结构和算法全解 js排序算法详解-归并排序 归并排序其实可以类比二分法,二分法其实就是二等分的意思,简而言之就是不断和新序列的中间值进行比较.归并排序似乎有异曲同工之妙,什么意思呢 ...
- js排序算法详解-基数排序
全栈工程师开发手册 (作者:栾鹏) js系列教程5-数据结构和算法全解 js排序算法详解-基数排序 其实基数排序和桶排序挺类似的,都是找一个容器把属于同一类的元素装起来,然后进行排序.可以把基数排序类 ...
- js排序算法详解-桶排序
全栈工程师开发手册 (作者:栾鹏) js系列教程5-数据结构和算法全解 js排序算法详解-桶排序 一看到这个名字就会觉得奇特,几个意思,我排序还要再准备几个桶不成?还真别说,想用桶排序还得真准备几个桶 ...
- js排序算法详解-计数排序
全栈工程师开发手册 (作者:栾鹏) js系列教程5-数据结构和算法全解 js排序算法详解-计数排序 计数排序就是遍历数组记录数组下的元素出现过多次,然后把这个元素找个位置先安置下来,简单点说就是以原数 ...
最新文章
- 剑指offer_第4题_重建二叉树
- 「SAP技术」SAP MM 事务代码ME17的用法
- (0056)iOS开发之深拷贝与浅拷贝
- etc/ld.so.conf
- 使用Python发送电子邮件
- 探果(简称tamguo)是基于java开发的在线题库系统
- PHP 代码简洁之道 ( PHP Clean Code)(第二部分)
- edge浏览器怎么设置activex_微软在新Edge浏览器中拒绝了ActiveX插件技术
- CentOS Steam 9 安装测试
- 创建电脑对象,电脑对象有关机和开机方法(静态对象构造方法)
- 如何把一条条的微信语音合成一个mp3文件?
- Kyligence联合创始人兼CTO李扬:用智能数据云打造全链路数字化转型
- 2017年南海区青少年信息学奥林匹克竞赛(小学甲组)
- 【树结构】Trie字典树
- 云产品--游戏加速云产品(已过期)
- 解决新版 Edge 浏览器每次打开都弹出“ 禁用开发人员模式扩展 ”弹窗的问题(亲测有效)
- masm5.0的使用介绍
- Elementary effect
- CodeGear开发者日投影片和Delphi 2007 For Win32范例录像
- 软件测试的岗位会越来越少吗?饱和了?