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中，表示以"流明（光通量单位）"为单位的光功率。