three.js源码翻译-RectAreaLight.js

three.js源码翻译-RectAreaLight.js

说明

PointLight平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。
接受四个参数分别为光的颜色，强度，光的宽和高。这是一个新出的光源，需要用到pbr渲染的材质，否则没有灯光效果。

源码位置及翻译

源码位置

src/light/RectAreaLight.js

源码翻译

/**
 *	平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。
 *	接受四个参数分别为光的颜色，强度，光的宽和高
 * 	不支持阴影。	只支持 MeshStandardMaterial 和 MeshPhysicalMaterial 两种材质。
 *	你必须在你的场景中加入 RectAreaLightUniformsLib ，并调用init()。
 * @param {Color} color 光源颜色
 * @param {Number} intensity 光源强度
 * @param {Number} width 光源的宽
 * @param {Number} height 光源的高
 */
function RectAreaLight( color, intensity, width, height ) {

	Light.call( this, color, intensity );

	this.type = 'RectAreaLight';
	//设置宽高默认为10
	this.width = ( width !== undefined ) ? width : 10;
	this.height = ( height !== undefined ) ? height : 10;

}

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

	constructor: RectAreaLight,

	isRectAreaLight: true,
	//复制方法
	copy: function ( source ) {

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

		this.width = source.width;
		this.height = source.height;

		return this;

	},

	toJSON: function ( meta ) {

		var data = Light.prototype.toJSON.call( this, meta );

		data.object.width = this.width;
		data.object.height = this.height;

		return data;

	}

} );

示例及案例

创建

let rectLight = new THREE.RectAreaLight(0xffffff, 1.5, 30, 30);
rectLight.position.set(50, 50, 0);
rectLight.lookAt(0, 0, 0);
scene.add(rectLight);

注意的点

• 没有阴影，可能后面会加上。
• 需要引入一个RectAreaLightUniformsLib.js的文件，否则场景中只有光源，没有物体啥的了。
• 需要MeshStandardMaterial/MeshPhysicalMaterial材质，否则没有效果。
• 需要把THREE.Renderer的.gammaInput和.gammaOutput设置为true。