我的threejs学习笔记（七）——spotLight

原创

于 2017-03-25 21:13:50 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#three-js

本文介绍了threejs中的spotLight特性，将其比喻为手电筒或舞台探照灯，强调其锥形发光区域、近场区、远场区和发散系数等属性。并探讨了点光源与聚光灯的区别。同时，文章讨论了three.js新旧版本中关于阴影设置的变化，包括shadowCameraVisible的使用，并提供了实现spotLight阴影效果的关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面

点光源（pointlight)的特点就像夜空中的烟雾弹，向四面八方发射光线；而聚光灯（spotlight）就像手电筒或者像舞台上的探照灯，效果是一个锥形的发光区域。相比于点光源，它有照射的近场区，远场区，和发散系数。

点光源属性

var spotLight=new THREE.SpotLight({color:"#f2f"});
    spotLight.intensity=1;
    spotLight.target=cube;
    spotLight.castShadow=true;
    spotLight.shadow.camera.near=2;
    spotLight.shadow.camera.far=200;
    spotLight.shadow.camera.fov=30;
    //shadowCameraVisible只有在老版本的threejs库中才支持，新版本已废除。
    //spotLight.shadowCameraVisible=true;
    var helper=new THREE.CameraHelper(spotLight.shadow.camera);
    scene.add(helper);
    scene.add(spotLight);

three.js更新的速度还是挺快的，比如之前版本的shadowCameraNear,shadowCameraFar,shadowCameraFov以及shadowCameraVisible都不能直接使用，而新版本中则用分开的形式来代替，而shadowCameraVisible的使用更复杂了一步。
对此，我也懒得去深究了，索性根据作者的版本，统一用