Editor: add RectAreaLight

editor/index.html

@@ -61,6 +61,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
+			import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js';
 
 			import { Editor } from './js/Editor.js';
 			import { Viewport } from './js/Viewport.js';
@@ -82,6 +83,8 @@
 
 			//
 
+			RectAreaLightUniformsLib.init();
+
 			const editor = new Editor();
 
 			window.editor = editor; // Expose editor to Console

editor/js/Editor.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
 
 import { Config } from './Config.js';
 import { Loader } from './Loader.js';
@@ -431,6 +432,10 @@ Editor.prototype = {
 
 					helper = new THREE.HemisphereLightHelper( object, 1 );
 
+				} else if ( object.isRectAreaLight ) {
+
+					helper = new RectAreaLightHelper( object );
+
 				} else if ( object.isSkinnedMesh ) {
 
 					helper = new THREE.SkeletonHelper( object.skeleton.bones[ 0 ] );

editor/js/Menubar.Add.js

@@ -385,6 +385,26 @@ function MenubarAdd( editor ) {
 	} );
 	options.add( option );
 
+	// RectAreaLight
+
+	option = new UIRow();
+	option.setClass( 'option' );
+	option.setTextContent( strings.getKey( 'menubar/add/rectarealight' ) );
+	option.onClick( function () {
+
+		const color = 0xffffff;
+		const intensity = 1;
+		const width = 10;
+		const height = 10;
+
+		const light = new THREE.RectAreaLight( color, intensity, width, height );
+		light.name = 'RectAreaLight';
+
+		editor.execute( new AddObjectCommand( editor, light ) );
+
+	} );
+	options.add( option );
+
 	// SpotLight
 
 	option = new UIRow();

editor/js/Sidebar.Object.js

@@ -214,6 +214,26 @@ function SidebarObject( editor ) {
 
 	container.add( objectFarRow );
 
+	// width
+
+	const objectWidthRow = new UIRow();
+	const objectWidth = new UINumber().onChange( update );
+
+	objectWidthRow.add( new UIText( strings.getKey( 'sidebar/object/width' ) ).setClass( 'Label' ) );
+	objectWidthRow.add( objectWidth );
+
+	container.add( objectWidthRow );
+
+	// height
+
+	const objectHeightRow = new UIRow();
+	const objectHeight = new UINumber().onChange( update );
+
+	objectHeightRow.add( new UIText( strings.getKey( 'sidebar/object/height' ) ).setClass( 'Label' ) );
+	objectHeightRow.add( objectHeight );
+
+	container.add( objectHeightRow );
+
 	// intensity
 
 	const objectIntensityRow = new UIRow();
@@ -508,6 +528,18 @@ function SidebarObject( editor ) {
 
 			}
 
+			if ( object.width !== undefined && Math.abs( object.width - objectWidth.getValue() ) >= 0.01 ) {
+
+				editor.execute( new SetValueCommand( editor, object, 'width', objectWidth.getValue() ) );
+
+			}
+
+			if ( object.height !== undefined && Math.abs( object.height - objectHeight.getValue() ) >= 0.01 ) {
+
+				editor.execute( new SetValueCommand( editor, object, 'height', objectHeight.getValue() ) );
+
+			}
+
 			if ( object.intensity !== undefined && Math.abs( object.intensity - objectIntensity.getValue() ) >= 0.01 ) {
 
 				editor.execute( new SetValueCommand( editor, object, 'intensity', objectIntensity.getValue() ) );
@@ -625,6 +657,8 @@ function SidebarObject( editor ) {
 	function updateRows( object ) {
 
 		const properties = {
+			'width': objectWidthRow,
+			'height': objectHeightRow,
 			'fov': objectFovRow,
 			'left': objectLeftRow,
 			'right': objectRightRow,
@@ -751,6 +785,18 @@ function SidebarObject( editor ) {
 		objectScaleY.setValue( object.scale.y );
 		objectScaleZ.setValue( object.scale.z );
 
+		if ( object.width !== undefined ) {
+
+			objectWidth.setValue( object.width );
+
+		}
+
+		if ( object.height !== undefined ) {
+
+			objectHeight.setValue( object.height );
+
+		}
+
 		if ( object.fov !== undefined ) {
 
 			objectFov.setValue( object.fov );

editor/js/Strings.js

@@ -45,6 +45,7 @@ function Strings( config ) {
 			'menubar/add/lathe': 'Lathe',
 			'menubar/add/sprite': 'Sprite',
 			'menubar/add/pointlight': 'PointLight',
+			'menubar/add/rectarealight': 'RectAreaLight',
 			'menubar/add/spotlight': 'SpotLight',
 			'menubar/add/directionallight': 'DirectionalLight',
 			'menubar/add/hemispherelight': 'HemisphereLight',
@@ -99,6 +100,8 @@ function Strings( config ) {
 			'sidebar/object/bottom': 'Bottom',
 			'sidebar/object/near': 'Near',
 			'sidebar/object/far': 'Far',
+			'sidebar/object/height': 'Height',
+			'sidebar/object/width': 'Width',
 			'sidebar/object/intensity': 'Intensity',
 			'sidebar/object/color': 'Color',
 			'sidebar/object/groundcolor': 'Ground Color',
@@ -398,6 +401,7 @@ function Strings( config ) {
 			'menubar/add/lathe': 'Tour',
 			'menubar/add/sprite': 'Sprite',
 			'menubar/add/pointlight': 'Lumière ponctuelle',
+			'menubar/add/rectarealight': 'RectAreaLight',
 			'menubar/add/spotlight': 'Projecteur',
 			'menubar/add/directionallight': 'Lumière directionnelle',
 			'menubar/add/hemispherelight': 'Lumière hémisphérique',
@@ -452,6 +456,8 @@ function Strings( config ) {
 			'sidebar/object/bottom': 'Bas',
 			'sidebar/object/near': 'Près',
 			'sidebar/object/far': 'Loin',
+			'sidebar/object/height': 'Height',
+			'sidebar/object/width': 'Width',
 			'sidebar/object/intensity': 'Intensité',
 			'sidebar/object/color': 'Couleur',
 			'sidebar/object/groundcolor': 'Couleur de fond',
@@ -751,6 +757,7 @@ function Strings( config ) {
 			'menubar/add/lathe': '酒杯',
 			'menubar/add/sprite': '精灵',
 			'menubar/add/pointlight': '点光源',
+			'menubar/add/rectarealight': 'RectAreaLight',
 			'menubar/add/spotlight': '聚光灯',
 			'menubar/add/directionallight': '平行光',
 			'menubar/add/hemispherelight': '半球光',
@@ -805,6 +812,8 @@ function Strings( config ) {
 			'sidebar/object/bottom': '下',
 			'sidebar/object/near': '近点',
 			'sidebar/object/far': '远点',
+			'sidebar/object/height': 'Height',
+			'sidebar/object/width': 'Width',
 			'sidebar/object/intensity': '强度',
 			'sidebar/object/color': '颜色',
 			'sidebar/object/groundcolor': '基色',
@@ -1104,6 +1113,7 @@ function Strings( config ) {
 			'menubar/add/lathe': '旋盤形',
 			'menubar/add/sprite': 'スプライト',
 			'menubar/add/pointlight': 'ポイントライト',
+			'menubar/add/rectarealight': 'RectAreaLight',
 			'menubar/add/spotlight': 'スポットライト',
 			'menubar/add/directionallight': 'ディレクショナルライト',
 			'menubar/add/hemispherelight': 'ヘミスフィアライト',
@@ -1158,6 +1168,8 @@ function Strings( config ) {
 			'sidebar/object/bottom': '下',
 			'sidebar/object/near': '範囲の開始',
 			'sidebar/object/far': '範囲の終了',
+			'sidebar/object/height': 'Height',
+			'sidebar/object/width': 'Width',
 			'sidebar/object/intensity': '強度',
 			'sidebar/object/color': '色',
 			'sidebar/object/groundcolor': '地面の色',

editor/js/Viewport.js

@@ -437,7 +437,7 @@ function Viewport( editor ) {
 
 		const helper = editor.helpers[ object.id ];
 
-		if ( helper !== undefined && helper.isSkeletonHelper !== true ) {
+		if ( helper !== undefined && helper.isSkeletonHelper !== true && helper.type !== 'RectAreaLightHelper' ) {
 
 			helper.update();