three.js源碼翻譯-PointLight.js

three.js源碼翻譯-PointLight.js

說明

PointLight這個名稱的翻譯就直接用網上的了，爲點光源。他和spot(聚光燈光源)最大的不同就是，點光源是向四周發射光，而spot則是類似一個椎體的光從一個點向各個方向發射的光源。

源碼位置及翻譯

源碼位置

src/light/PointLight.js

源碼翻譯

/**
 * point光和spot光的區別在於point是向四周發射光，而spot則是類似一個椎體的光
 * 從一個點向各個方向發射的光源。一個常見的例子是模擬一個燈泡發出的光。 
 * @param {Color} color 光源顏色
 * @param {Number} intensity	光源強度
 * @param {Number} distance 光源距離
 * @param {Number} decay 沿着光照距離的衰退量
 */
function PointLight( color, intensity, distance, decay ) {

	Light.call( this, color, intensity );

	this.type = 'PointLight';
	//新加了一個power屬性，power數值根據傳入的強度數值來設置的
	Object.defineProperty( this, 'power', {
		get: function () {

			// intensity = power per solid angle.
			// ref: equation (15) from https://seblagarde.files.wordpress.com/2015/07/course_notes_moving_frostbite_to_pbr_v32.pdf
			return this.intensity * 4 * Math.PI;

		},
		set: function ( power ) {

			// intensity = power per solid angle.
			// ref: equation (15) from https://seblagarde.files.wordpress.com/2015/07/course_notes_moving_frostbite_to_pbr_v32.pdf
			this.intensity = power / ( 4 * Math.PI );

		}
	} );

	this.distance = ( distance !== undefined ) ? distance : 0;
	//沿着光照距離的衰退量
	this.decay = ( decay !== undefined ) ? decay : 1;	// for physically correct lights, should be 2.

	this.shadow = new LightShadow( new PerspectiveCamera( 90, 1, 0.5, 500 ) );

}

PointLight.prototype = Object.assign( Object.create( Light.prototype ), {

	constructor: PointLight,

	isPointLight: true,

	copy: function ( source ) {

		Light.prototype.copy.call( this, source );

		this.distance = source.distance;
		this.decay = source.decay;

		this.shadow = source.shadow.clone();

		return this;

	}

} );

示例及案例

創建

let sphere = new THREE.SphereBufferGeometry(1, 16, 16);
let pointLight = new THREE.PointLight(0xff0000, 5, 50);
pointLight.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0xff0040 })));
pointLight.position.z = -3.5;
pointLight.castShadow = true;
pointLight.shadow.camera.near = 0.1;
pointLight.shadow.camera.far = 600;
pointLight.shadow.bias = - 0.005;
scene.add(pointLight);

注意的點

• 從上面的代碼可以看到，點光源也是有陰影的，因爲沒有其他特殊的參數，就是傳一個透視攝像機到shadow方法中。同樣建議在一個helper下調參。
• 需要將光源的.castShadow設置爲true，同時需要將接受陰影的mesh的.receiveShadow設置爲true，然後還有渲染器中的.shadowMap.enabled也要設置爲true。表格如下

操作物體/屬性	光源(eg:THREE.DirectionalLight)	接受陰影的物體(THREE.Mesh)	渲染器(THREE.WebGLRenderer)
.castShadow	✅ Yes
.receiveShadow		✅ Yes
.shadowMap.enabled			✅ Yes

• 在 physically correct(英語渣，應該是真實物理，或者類似的) 模式中，decay = 2。
• 然後那個power就是傳進來intensity * 4π，因爲在physically correct中，表示以"流明（光通量單位）"爲單位的光功率。