SpotLight
光源是聚光灯光源,类似手电筒,会形成一种锥形效果的光,可以产生阴影,比较常用。
示例浏览地址:https://ithanmang.gitee.io/threejs/home/201807/20180731/02-spotlight.html
构造函数
SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )
参数
color
- (可选) 十六进制颜色的光 默认为 0xffffff
(white).
intensity
- (可选) 光的强度数值. 默认值为1
.
distance
- 光源从原点发出的距离,值越大,光的强度会逐渐衰减.
angle
- 光源的散射角度默认为Math.PI/2
.
penumbra
- 光影聚焦的百分比 0
-1
之间,默认值为0,所以阴影会产生锯齿效果.
decay
- 光在距离上的强度.
阴影相关
SpotLightShadow
这不是一个方法,这是用来在使用聚光灯的时候可以对阴影进行微调.
首先,要想产生阴影,渲染器要开启阴影支持,如下代码
// 设置渲染器的像素比例,按照设备
renderer.setPixelRatio(window.devicePixelRatio);
// 渲染背景色
renderer.setClearColor(0x050505);
// 渲染范围
renderer.setSize(window.innerWidth, window.innerHeight);
// 开启阴影支持
renderer.shadowMap.enabled = true;
// 阴影类型
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
然后就可以对阴影进行微调
// 设置阴影分辨率
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
// 投影近点 --> 从距离光源的哪一才产生阴影
spotLight.shadow.camera.near = 0.1;
// 投影原点 --> 到光源的哪一点位置不产生阴影
spotLight.shadow.camera.far = 300;
// 投影视场
spotLight.shadow.camera.fov = 40;
scene.add(spotLight);
// 阴影相机助手
shadowCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
scene.add(shadowCameraHelper);
// 聚光光源助手
spotLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);
以上代码在场景中添加了一下辅助对象,CameraHelper
和SpotLightHelper
,通过这些辅助对象,可以更好去理解SpotLight
一些参数变化时不同的状态。
每个灯光都会有一个助手,来debug
的时候添加,了解更多查看three.js
文档。
另外值得注意的是,接收阴影的对象,也会对阴影的效果产生一定的影响,例如,用一个平面来接收阴影,则平面的分割段数的多少则影响着阴影分辨率的效果。
本篇示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spotlight 锥形光源</title>
<style>
body {
margin: 0;
overflow: hidden;/*溢出隐藏*/
}
</style>
<script src="../../libs/build/three.min.js"></script>
<script src="../../libs/examples/js/controls/OrbitControls.js"></script>
<script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
<script src="../../libs/examples/js/libs/stats.min.js"></script>
<script src="../../libs/examples/js/Detector.js"></script>
</head>
<body