盐城做企业网站的价格经典设计作品

入门部分给大家介绍过平行光DirectionalLight、点光源PointLight、环境光AmbientLight,下面给大家介绍一个新的光源对象，也就是聚光源SpotLight。

创建聚光源SpotLight

聚光源可以认为是一个沿着特定方会逐渐发散的光源，照射范围在三维空间中构成一个圆锥体。

// 聚光源
// 0xffffff:光源颜色
// 1.0：光照强度intensity
const spotLight = new THREE.SpotLight(0xffffff,1.0);
scene.add(spotLight);//光源添加到场景中

光照强度也可以不通过THREE.SpotLight参数2设置，直接通过光照强度属性.intensity设置。

spotLight.intensity = 1.0;//光照强度

聚光源发散角度.angle

通过属性.angle可以设置聚光源发散角度，和目标.target两个属性来实现。

// 设置聚光光源发散角度
spotLight.angle = Math.PI / 6;//光锥角度的二分之一

光源衰减

生活中聚光源，比如台灯、手电筒之类，随机距离的改变，光线会衰减，越来越弱，.decay默认值是2.0，如果你不希望衰减可以设置为0.0。

spotLight.decay = 0.0;//设置光源不随距离衰减

如果使用默认衰减2.0，对于部分threejs新版本，有时候你可能看不到光源效果，这时候可以把光照强度加强,如果你的版本不影响，就不用加强光照强度(根据版本情况灵活对应)。

// 你可以对比不同光照强度明暗差异(传播同样距离)
spotLight.intensity = 1000.0;//光照强度
spotLight.intensity = 5000.0;//光照强度

聚光源位置.position

聚光源SpotLight的父类是Light，Light的父类是Object3D，聚光源SpotLight会继承父类Object3D的位置属性.position。

// 设置聚光光源位置
spotLight.position.set(0, 50, 0);

聚光源目标对象.target

聚光源目标对象.target和光源的位置.position共同确定聚光源照射方向。

浏览器控制台打印聚光源目标对象.target属性，可以看到属性值是一个模型对象Object3D。

console.log('聚光源指向目标',spotLight.target);

聚光源目标对象属性的位置通过属性值Object3D的.position属性设置。

// spotLight.target是一个模型对象Object3D，默认在坐标原点
spotLight.target.position.set(50,0,0);
//spotLight.target添加到场景中.target.position才会起作用
scene.add(spotLight.target);

聚光源辅助对象SpotLightHelper

// 聚光源辅助对象，可视化聚光源
const spotLightHelper = new THREE.SpotLightHelper(spotLight,0xffffff)
scene.add(spotLightHelper);