@thanhthbm/scene-editor 0.1.0

package/src/editor/js/Sidebar.Material.MapProperty.js

@@ -0,0 +1,277 @@
+import * as THREE from 'three';
+
+import { UIButton, UICheckbox, UIDiv, UINumber, UIRow, UIText } from './libs/ui.js';
+import { UITexture } from './libs/ui.three.js';
+import { SetMaterialMapCommand } from './commands/SetMaterialMapCommand.js';
+import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
+import { SetMaterialRangeCommand } from './commands/SetMaterialRangeCommand.js';
+import { SetMaterialVectorCommand } from './commands/SetMaterialVectorCommand.js';
+import { SetTextureParametersCommand } from './commands/SetTextureParametersCommand.js';
+import { TextureParametersDialog } from './TextureParametersDialog.js';
+
+function SidebarMaterialMapProperty( editor, property, name ) {
+
+	const signals = editor.signals;
+
+	const container = new UIRow();
+	container.add( new UIText( name ).setClass( 'Label' ) );
+
+	const enabled = new UICheckbox( false ).setMarginRight( '8px' ).onChange( onChange );
+	container.add( enabled );
+
+	const map = new UITexture( editor ).onChange( onMapChange );
+	container.add( map );
+
+	const settings = new UIButton( '⚙' ).setClass( 'TextureSettingsButton' ).setMarginRight( '4px' ).onClick( onSettingsClick );
+	settings.setDisabled( true );
+	container.add( settings );
+
+	const mapType = property.replace( 'Map', '' );
+
+	const colorMaps = [ 'map', 'emissiveMap', 'sheenColorMap', 'specularColorMap', 'envMap' ];
+
+	let intensity;
+
+	if ( property === 'aoMap' ) {
+
+		intensity = new UINumber( 1 ).setWidth( '30px' ).setRange( 0, 1 ).onChange( onIntensityChange );
+		container.add( intensity );
+
+	}
+
+	let scale;
+
+	if ( property === 'bumpMap' || property === 'displacementMap' ) {
+
+		scale = new UINumber().setWidth( '30px' ).onChange( onScaleChange );
+		container.add( scale );
+
+	}
+
+	let scaleX, scaleY;
+
+	if ( property === 'normalMap' || property === 'clearcoatNormalMap' ) {
+
+		scaleX = new UINumber().setWidth( '30px' ).onChange( onScaleXYChange );
+		container.add( scaleX );
+
+		scaleY = new UINumber().setWidth( '30px' ).onChange( onScaleXYChange );
+		container.add( scaleY );
+
+	}
+
+	let rangeMin, rangeMax;
+
+	if ( property === 'iridescenceThicknessMap' ) {
+
+		const range = new UIDiv().setMarginLeft( '3px' );
+		container.add( range );
+
+		const rangeMinRow = new UIRow().setMarginBottom( '0px' ).setStyle( 'min-height', '0px' );
+		range.add( rangeMinRow );
+
+		rangeMinRow.add( new UIText( 'min:' ).setWidth( '35px' ) );
+
+		rangeMin = new UINumber().setWidth( '40px' ).onChange( onRangeChange );
+		rangeMinRow.add( rangeMin );
+
+		const rangeMaxRow = new UIRow().setMarginBottom( '6px' ).setStyle( 'min-height', '0px' );
+		range.add( rangeMaxRow );
+
+		rangeMaxRow.add( new UIText( 'max:' ).setWidth( '35px' ) );
+
+		rangeMax = new UINumber().setWidth( '40px' ).onChange( onRangeChange );
+		rangeMaxRow.add( rangeMax );
+
+		// Additional settings for iridescenceThicknessMap
+		// Please add conditional if more maps are having a range property
+		rangeMin.setPrecision( 0 ).setRange( 0, Infinity ).setNudge( 1 ).setStep( 10 ).setUnit( 'nm' );
+		rangeMax.setPrecision( 0 ).setRange( 0, Infinity ).setNudge( 1 ).setStep( 10 ).setUnit( 'nm' );
+
+	}
+
+	let object = null;
+	let materialSlot = null;
+	let material = null;
+
+	function onChange() {
+
+		const newMap = enabled.getValue() ? map.getValue() : null;
+
+		if ( material[ property ] !== newMap ) {
+
+			if ( newMap !== null ) {
+
+				const geometry = object.geometry;
+
+				if ( geometry.hasAttribute( 'uv' ) === false ) console.warn( 'Geometry doesn\'t have uvs:', geometry );
+
+				if ( property === 'envMap' ) newMap.mapping = THREE.EquirectangularReflectionMapping;
+
+			}
+
+			editor.execute( new SetMaterialMapCommand( editor, object, property, newMap, materialSlot ) );
+
+		}
+
+	}
+
+	async function onSettingsClick() {
+
+		const texture = map.getValue();
+		if ( texture === null ) return;
+
+		const dialog = new TextureParametersDialog( editor, texture );
+
+		try {
+
+			const parameters = await dialog.show();
+			editor.execute( new SetTextureParametersCommand( editor, texture, parameters ) );
+
+		} catch ( e ) {
+
+			// Edit cancelled
+
+		}
+
+	}
+
+	function onMapChange( texture ) {
+
+		if ( texture !== null ) {
+
+			if ( colorMaps.includes( property ) && texture.isDataTexture !== true && texture.colorSpace !== THREE.SRGBColorSpace ) {
+
+				texture.colorSpace = THREE.SRGBColorSpace;
+				material.needsUpdate = true;
+
+			}
+
+		}
+
+		enabled.setDisabled( false );
+		settings.setDisabled( texture === null );
+
+		onChange();
+
+	}
+
+	function onIntensityChange() {
+
+		if ( material[ `${ property }Intensity` ] !== intensity.getValue() ) {
+
+			editor.execute( new SetMaterialValueCommand( editor, object, `${ property }Intensity`, intensity.getValue(), materialSlot ) );
+
+		}
+
+	}
+
+	function onScaleChange() {
+
+		if ( material[ `${ mapType }Scale` ] !== scale.getValue() ) {
+
+			editor.execute( new SetMaterialValueCommand( editor, object, `${ mapType }Scale`, scale.getValue(), materialSlot ) );
+
+		}
+
+	}
+
+	function onScaleXYChange() {
+
+		const value = [ scaleX.getValue(), scaleY.getValue() ];
+
+		if ( material[ `${ mapType }Scale` ].x !== value[ 0 ] || material[ `${ mapType }Scale` ].y !== value[ 1 ] ) {
+
+			editor.execute( new SetMaterialVectorCommand( editor, object, `${ mapType }Scale`, value, materialSlot ) );
+
+		}
+
+	}
+
+	function onRangeChange() {
+
+		const value = [ rangeMin.getValue(), rangeMax.getValue() ];
+
+		if ( material[ `${ mapType }Range` ][ 0 ] !== value[ 0 ] || material[ `${ mapType }Range` ][ 1 ] !== value[ 1 ] ) {
+
+			editor.execute( new SetMaterialRangeCommand( editor, object, `${ mapType }Range`, value[ 0 ], value[ 1 ], materialSlot ) );
+
+		}
+
+	}
+
+	function update( currentObject, currentMaterialSlot = 0 ) {
+
+		object = currentObject;
+		materialSlot = currentMaterialSlot;
+
+		if ( object === null ) return;
+		if ( object.material === undefined ) return;
+
+		material = editor.getObjectMaterial( object, materialSlot );
+
+		if ( property in material ) {
+
+			if ( material[ property ] !== null ) {
+
+				map.setValue( material[ property ] );
+
+			}
+
+			enabled.setValue( material[ property ] !== null );
+			enabled.setDisabled( map.getValue() === null );
+			settings.setDisabled( map.getValue() === null );
+
+			if ( intensity !== undefined ) {
+
+				intensity.setValue( material[ `${ property }Intensity` ] );
+
+			}
+
+			if ( scale !== undefined ) {
+
+				scale.setValue( material[ `${ mapType }Scale` ] );
+
+			}
+
+			if ( scaleX !== undefined ) {
+
+				scaleX.setValue( material[ `${ mapType }Scale` ].x );
+				scaleY.setValue( material[ `${ mapType }Scale` ].y );
+
+			}
+
+			if ( rangeMin !== undefined ) {
+
+				rangeMin.setValue( material[ `${ mapType }Range` ][ 0 ] );
+				rangeMax.setValue( material[ `${ mapType }Range` ][ 1 ] );
+
+			}
+
+			container.setDisplay( '' );
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	}
+
+	//
+
+	signals.objectSelected.add( function ( selected ) {
+
+		map.setValue( null );
+
+		update( selected );
+
+	} );
+
+	signals.materialChanged.add( update );
+
+	return container;
+
+}
+
+export { SidebarMaterialMapProperty };

package/src/editor/js/Sidebar.Material.NumberProperty.js

@@ -0,0 +1,60 @@
+import { UINumber, UIRow, UIText } from './libs/ui.js';
+import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
+
+function SidebarMaterialNumberProperty( editor, property, name, range = [ - Infinity, Infinity ], precision = 2 ) {
+
+	const signals = editor.signals;
+
+	const container = new UIRow();
+	container.add( new UIText( name ).setClass( 'Label' ) );
+
+	const number = new UINumber().setWidth( '60px' ).setRange( range[ 0 ], range[ 1 ] ).setPrecision( precision ).onChange( onChange );
+	container.add( number );
+
+	let object = null;
+	let materialSlot = null;
+	let material = null;
+
+	function onChange() {
+
+		if ( material[ property ] !== number.getValue() ) {
+
+			editor.execute( new SetMaterialValueCommand( editor, object, property, number.getValue(), materialSlot ) );
+
+		}
+
+	}
+
+	function update( currentObject, currentMaterialSlot = 0 ) {
+
+		object = currentObject;
+		materialSlot = currentMaterialSlot;
+
+		if ( object === null ) return;
+		if ( object.material === undefined ) return;
+
+		material = editor.getObjectMaterial( object, materialSlot );
+
+		if ( property in material ) {
+
+			number.setValue( material[ property ] );
+			container.setDisplay( '' );
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	}
+
+	//
+
+	signals.objectSelected.add( update );
+	signals.materialChanged.add( update );
+
+	return container;
+
+}
+
+export { SidebarMaterialNumberProperty };

package/src/editor/js/Sidebar.Material.Program.js

@@ -0,0 +1,73 @@
+import { UIButton, UIRow, UIText } from './libs/ui.js';
+
+function SidebarMaterialProgram( editor, property ) {
+
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	let object = null;
+	let materialSlot = null;
+	let material = null;
+
+	const container = new UIRow();
+	container.add( new UIText( strings.getKey( 'sidebar/material/program' ) ).setClass( 'Label' ) );
+
+	const programInfo = new UIButton( strings.getKey( 'sidebar/material/info' ) );
+	programInfo.setMarginRight( '4px' );
+	programInfo.onClick( function () {
+
+		signals.editScript.dispatch( object, 'programInfo' );
+
+	} );
+	container.add( programInfo );
+
+	const programVertex = new UIButton( strings.getKey( 'sidebar/material/vertex' ) );
+	programVertex.setMarginRight( '4px' );
+	programVertex.onClick( function () {
+
+		signals.editScript.dispatch( object, 'vertexShader' );
+
+	} );
+	container.add( programVertex );
+
+	const programFragment = new UIButton( strings.getKey( 'sidebar/material/fragment' ) );
+	programFragment.setMarginRight( '4px' );
+	programFragment.onClick( function () {
+
+		signals.editScript.dispatch( object, 'fragmentShader' );
+
+	} );
+	container.add( programFragment );
+
+	function update( currentObject, currentMaterialSlot = 0 ) {
+
+		object = currentObject;
+		materialSlot = currentMaterialSlot;
+
+		if ( object === null ) return;
+		if ( object.material === undefined ) return;
+
+		material = editor.getObjectMaterial( object, materialSlot );
+
+		if ( property in material ) {
+
+			container.setDisplay( '' );
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	}
+
+	//
+
+	signals.objectSelected.add( update );
+	signals.materialChanged.add( update );
+
+	return container;
+
+}
+
+export { SidebarMaterialProgram };

package/src/editor/js/Sidebar.Material.RangeValueProperty.js

@@ -0,0 +1,63 @@
+import { UINumber, UIRow, UIText } from './libs/ui.js';
+import { SetMaterialRangeCommand } from './commands/SetMaterialRangeCommand.js';
+
+function SidebarMaterialRangeValueProperty( editor, property, name, isMin, range = [ - Infinity, Infinity ], precision = 2, step = 1, nudge = 0.01, unit = '' ) {
+
+	const signals = editor.signals;
+
+	const container = new UIRow();
+	container.add( new UIText( name ).setClass( 'Label' ) );
+
+	const number = new UINumber().setWidth( '60px' ).setRange( range[ 0 ], range[ 1 ] ).setPrecision( precision ).setStep( step ).setNudge( nudge ).setUnit( unit ).onChange( onChange );
+	container.add( number );
+
+	let object = null;
+	let materialSlot = null;
+	let material = null;
+
+	function onChange() {
+
+		if ( material[ property ][ isMin ? 0 : 1 ] !== number.getValue() ) {
+
+			const minValue = isMin ? number.getValue() : material[ property ][ 0 ];
+			const maxValue = isMin ? material[ property ][ 1 ] : number.getValue();
+
+			editor.execute( new SetMaterialRangeCommand( editor, object, property, minValue, maxValue, materialSlot ) );
+
+		}
+
+	}
+
+	function update( currentObject, currentMaterialSlot = 0 ) {
+
+		object = currentObject;
+		materialSlot = currentMaterialSlot;
+
+		if ( object === null ) return;
+		if ( object.material === undefined ) return;
+
+		material = editor.getObjectMaterial( object, materialSlot );
+
+		if ( property in material ) {
+
+			number.setValue( material[ property ][ isMin ? 0 : 1 ] );
+			container.setDisplay( '' );
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	}
+
+	//
+
+	signals.objectSelected.add( update );
+	signals.materialChanged.add( update );
+
+	return container;
+
+}
+
+export { SidebarMaterialRangeValueProperty };