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文件。
• 光源需要一個照射目標，才能展示出陰影效果，這也很好理解，打個手電筒總的照射個具體的東西吧。
• 我這裏爲了展示完全的東西，所以加了具體的燈的小球，實際中加的很少。