Three.js - SpotLight 光源

最新推荐文章于 2024-05-13 09:52:59 发布

「已注销」

最新推荐文章于 2024-05-13 09:52:59 发布

阅读量4.2k

点赞数 1

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/81326856

版权

这篇博客介绍了Three.js中的SpotLight光源，它类似于手电筒，能产生锥形光效和阴影。文章提供了一个示例链接，详细解释了SpotLight的构造函数参数，包括颜色、强度、距离等，并讨论了阴影相关设置，如SpotLightShadow。为了获得阴影，需要在渲染器中开启阴影支持，并调整相关参数以优化阴影效果。最后，提到了接收阴影的对象如平面的细分数量对阴影分辨率的影响。

摘要由CSDN通过智能技术生成

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>

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Three.js - SpotLight 光源

SpotLight光源是聚光灯光源，类似手电筒，会形成一种锥形效果的光，可以产生阴影，比较常用。示例浏览地址：http://ithanmang.com/threeJs/home/02-spotlight.html构造函数SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, pe...
复制链接

扫一扫