three.js源码翻译-SpotLight.js
说明
SpotLight聚光灯光源,从光源点沿圆锥体发射光,也就是离光源越远光照的尺寸也就越大,光源会随着距离的增大而衰减,类似于手电筒照射出的光的效果。
源码位置及翻译
源码位置
src/light/SpotLight.js
源码翻译
/**
* 点光源,从光源点沿圆锥体发射光,也就是离光源越远光照的尺寸也就越大
*
* @param {Color} color 光源颜色
* @param {Number} intensity 光源强度
* @param {*} distance 光源距离
* @param {*} angle 光源散射的角度
* @param {*} penumbra 光锥衰减的百分比
* @param {*} decay 沿距离衰减的百分比
*/
function SpotLight( color, intensity, distance, angle, penumbra, decay ) {
Light.call( this, color, intensity );
this.type = 'SpotLight';
this.position.copy( Object3D.DefaultUp );
this.updateMatrix();
//朝向的位置
this.target = new Object3D();
Object.defineProperty( this, 'power', {
get: function () {
// intensity = power per solid angle.
// ref: equation (17) from https://seblagarde.files.wordpress.com/2015/07/course_notes_moving_frostbite_to_pbr_v32.pdf
return this.intensity * Math.PI;
},
set: function ( power ) {
// intensity = power per solid angle.
// ref: equation (17) from https://seblagarde.files.wordpress.com/2015/07/course_notes_moving_frostbite_to_pbr_v32.pdf
this.intensity = power / Math.PI;
}
} );
this.distance = ( distance !== undefined ) ? distance : 0;
this.angle = ( angle !== undefined ) ? angle : Math.PI / 3;
this.penumbra = ( penumbra !== undefined ) ? penumbra : 0;
this.decay = ( decay !== undefined ) ? decay : 1; // for physically correct lights, should be 2.
this.shadow = new SpotLightShadow();
}
SpotLight.prototype = Object.assign( Object.create( Light.prototype ), {
constructor: SpotLight,
isSpotLight: true,
//复制方法
copy: function ( source ) {
Light.prototype.copy.call( this, source );
this.distance = source.distance;
this.angle = source.angle;
this.penumbra = source.penumbra;
this.decay = source.decay;
this.target = source.target.clone();
this.shadow = source.shadow.clone();
return this;
}
} );
示例及案例
创建
let sphere = new THREE.SphereBufferGeometry(1, 16, 16);
let spotLight = new THREE.SpotLight(0xffff00, 2.0, 150);
spotLight.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xff00ff })));
spotLight.position.y = 100;
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 10;
spotLight.shadow.camera.far = 150;
spotLight.shadow.camera.fov = 45;
scene.add(spotLight);
spotLight.target = ground;
scene.add(spotLight.target);
注意的点
- 有阴影,也有自己特殊的值,所以有自己的shadow文件。
- 光源需要一个照射目标,才能展示出阴影效果,这也很好理解,打个手电筒总的照射个具体的东西吧。
- 我这里为了展示完全的东西,所以加了具体的灯的小球,实际中加的很少。