three.js源码翻译-SpotLight.js

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文件。
• 光源需要一个照射目标，才能展示出阴影效果，这也很好理解，打个手电筒总的照射个具体的东西吧。
• 我这里为了展示完全的东西，所以加了具体的灯的小球，实际中加的很少。