@thanhthbm/scene-editor 0.1.0

package/src/editor/js/Sidebar.Geometry.js

@@ -0,0 +1,471 @@
+import * as THREE from 'three';
+
+import { UIPanel, UIRow, UIText, UIInput, UIButton, UISpan, UITextArea, UINumber, UIDiv, UIBreak } from './libs/ui.js';
+
+import { SetGeometryValueCommand } from './commands/SetGeometryValueCommand.js';
+
+import { SidebarGeometryBufferGeometry } from './Sidebar.Geometry.BufferGeometry.js';
+import { SidebarGeometryModifiers } from './Sidebar.Geometry.Modifiers.js';
+
+import { GeometryParametersPanel as BoxPanel } from './Sidebar.Geometry.BoxGeometry.js';
+import { GeometryParametersPanel as CapsulePanel } from './Sidebar.Geometry.CapsuleGeometry.js';
+import { GeometryParametersPanel as CirclePanel } from './Sidebar.Geometry.CircleGeometry.js';
+import { GeometryParametersPanel as CylinderPanel } from './Sidebar.Geometry.CylinderGeometry.js';
+import { GeometryParametersPanel as DodecahedronPanel } from './Sidebar.Geometry.DodecahedronGeometry.js';
+import { GeometryParametersPanel as ExtrudePanel } from './Sidebar.Geometry.ExtrudeGeometry.js';
+import { GeometryParametersPanel as IcosahedronPanel } from './Sidebar.Geometry.IcosahedronGeometry.js';
+import { GeometryParametersPanel as LathePanel } from './Sidebar.Geometry.LatheGeometry.js';
+import { GeometryParametersPanel as OctahedronPanel } from './Sidebar.Geometry.OctahedronGeometry.js';
+import { GeometryParametersPanel as PlanePanel } from './Sidebar.Geometry.PlaneGeometry.js';
+import { GeometryParametersPanel as RingPanel } from './Sidebar.Geometry.RingGeometry.js';
+import { GeometryParametersPanel as ShapePanel } from './Sidebar.Geometry.ShapeGeometry.js';
+import { GeometryParametersPanel as SpherePanel } from './Sidebar.Geometry.SphereGeometry.js';
+import { GeometryParametersPanel as TetrahedronPanel } from './Sidebar.Geometry.TetrahedronGeometry.js';
+import { GeometryParametersPanel as TextPanel } from './Sidebar.Geometry.TextGeometry.js';
+import { GeometryParametersPanel as TorusPanel } from './Sidebar.Geometry.TorusGeometry.js';
+import { GeometryParametersPanel as TorusKnotPanel } from './Sidebar.Geometry.TorusKnotGeometry.js';
+import { GeometryParametersPanel as TubePanel } from './Sidebar.Geometry.TubeGeometry.js';
+
+import { VertexNormalsHelper } from 'three/addons/helpers/VertexNormalsHelper.js';
+
+const _GEOMETRY_PANELS = {
+	BoxGeometry: BoxPanel,
+	CapsuleGeometry: CapsulePanel,
+	CircleGeometry: CirclePanel,
+	CylinderGeometry: CylinderPanel,
+	DodecahedronGeometry: DodecahedronPanel,
+	ExtrudeGeometry: ExtrudePanel,
+	IcosahedronGeometry: IcosahedronPanel,
+	LatheGeometry: LathePanel,
+	OctahedronGeometry: OctahedronPanel,
+	PlaneGeometry: PlanePanel,
+	RingGeometry: RingPanel,
+	ShapeGeometry: ShapePanel,
+	SphereGeometry: SpherePanel,
+	TetrahedronGeometry: TetrahedronPanel,
+	TextGeometry: TextPanel,
+	TorusGeometry: TorusPanel,
+	TorusKnotGeometry: TorusKnotPanel,
+	TubeGeometry: TubePanel
+};
+
+function SidebarGeometry( editor ) {
+
+	const strings = editor.strings;
+
+	const signals = editor.signals;
+
+	const container = new UIPanel();
+	container.setBorderTop( '0' );
+	container.setDisplay( 'none' );
+	container.setPaddingTop( '20px' );
+
+	let currentGeometryType = null;
+
+	// Actions
+
+	/*
+	let objectActions = new UISelect().setPosition( 'absolute' ).setRight( '8px' ).setFontSize( '11px' );
+	objectActions.setOptions( {
+
+		'Actions': 'Actions',
+		'Center': 'Center',
+		'Convert': 'Convert',
+		'Flatten': 'Flatten'
+
+	} );
+	objectActions.onClick( function ( event ) {
+
+		event.stopPropagation(); // Avoid panel collapsing
+
+	} );
+	objectActions.onChange( function ( event ) {
+
+		let action = this.getValue();
+
+		let object = editor.selected;
+		let geometry = object.geometry;
+
+		if ( confirm( action + ' ' + object.name + '?' ) === false ) return;
+
+		switch ( action ) {
+
+			case 'Center':
+
+				let offset = geometry.center();
+
+				let newPosition = object.position.clone();
+				newPosition.sub( offset );
+				editor.execute( new SetPositionCommand( editor, object, newPosition ) );
+
+				editor.signals.geometryChanged.dispatch( object );
+
+				break;
+
+			case 'Flatten':
+
+				let newGeometry = geometry.clone();
+				newGeometry.uuid = geometry.uuid;
+				newGeometry.applyMatrix( object.matrix );
+
+				let cmds = [ new SetGeometryCommand( editor, object, newGeometry ),
+					new SetPositionCommand( editor, object, new THREE.Vector3( 0, 0, 0 ) ),
+					new SetRotationCommand( editor, object, new THREE.Euler( 0, 0, 0 ) ),
+					new SetScaleCommand( editor, object, new THREE.Vector3( 1, 1, 1 ) ) ];
+
+				editor.execute( new MultiCmdsCommand( editor, cmds ), 'Flatten Geometry' );
+
+				break;
+
+		}
+
+		this.setValue( 'Actions' );
+
+	} );
+	container.addStatic( objectActions );
+	*/
+
+	// type
+
+	const geometryTypeRow = new UIRow();
+	const geometryType = new UIText();
+
+	geometryTypeRow.add( new UIText( strings.getKey( 'sidebar/geometry/type' ) ).setClass( 'Label' ) );
+	geometryTypeRow.add( geometryType );
+
+	container.add( geometryTypeRow );
+
+	// uuid
+
+	const geometryUUIDRow = new UIRow();
+	const geometryUUID = new UIInput().setWidth( '102px' ).setFontSize( '12px' ).setDisabled( true );
+	const geometryUUIDRenew = new UIButton( strings.getKey( 'sidebar/geometry/new' ) ).setMarginLeft( '7px' ).onClick( function () {
+
+		geometryUUID.setValue( THREE.MathUtils.generateUUID() );
+
+		editor.execute( new SetGeometryValueCommand( editor, editor.selected, 'uuid', geometryUUID.getValue() ) );
+
+	} );
+
+	geometryUUIDRow.add( new UIText( strings.getKey( 'sidebar/geometry/uuid' ) ).setClass( 'Label' ) );
+	geometryUUIDRow.add( geometryUUID );
+	geometryUUIDRow.add( geometryUUIDRenew );
+
+	container.add( geometryUUIDRow );
+
+	// name
+
+	const geometryNameRow = new UIRow();
+	const geometryName = new UIInput().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
+
+		editor.execute( new SetGeometryValueCommand( editor, editor.selected, 'name', geometryName.getValue() ) );
+
+	} );
+
+	geometryNameRow.add( new UIText( strings.getKey( 'sidebar/geometry/name' ) ).setClass( 'Label' ) );
+	geometryNameRow.add( geometryName );
+
+	container.add( geometryNameRow );
+
+	// parameters
+
+	const parameters = new UISpan();
+	container.add( parameters );
+
+	// buffergeometry
+
+	container.add( new SidebarGeometryBufferGeometry( editor ) );
+
+	// Size
+
+	const geometryBoundingBox = new UIText().setFontSize( '12px' );
+
+	const geometryBoundingBoxRow = new UIRow();
+	geometryBoundingBoxRow.add( new UIText( strings.getKey( 'sidebar/geometry/bounds' ) ).setClass( 'Label' ) );
+	geometryBoundingBoxRow.add( geometryBoundingBox );
+	container.add( geometryBoundingBoxRow );
+
+	// userData
+
+	const geometryUserDataRow = new UIRow();
+	const geometryUserData = new UITextArea().setValue( '{}' ).setWidth( '150px' ).setHeight( '40px' ).setFontSize( '12px' ).onChange( function () {
+
+		try {
+
+			const userData = JSON.parse( geometryUserData.getValue() );
+
+			if ( JSON.stringify( editor.selected.geometry.userData ) != JSON.stringify( userData ) ) {
+
+				editor.execute( new SetGeometryValueCommand( editor, editor.selected, 'userData', userData ) );
+
+				build();
+
+			}
+
+		} catch ( exception ) {
+
+			console.warn( exception );
+
+		}
+
+	} );
+	geometryUserData.onKeyUp( function () {
+
+		try {
+
+			JSON.parse( geometryUserData.getValue() );
+
+			geometryUserData.dom.classList.add( 'success' );
+			geometryUserData.dom.classList.remove( 'fail' );
+
+		} catch ( error ) {
+
+			geometryUserData.dom.classList.remove( 'success' );
+			geometryUserData.dom.classList.add( 'fail' );
+
+		}
+
+	} );
+
+	geometryUserDataRow.add( new UIText( strings.getKey( 'sidebar/geometry/userdata' ) ).setClass( 'Label' ) );
+	geometryUserDataRow.add( geometryUserData );
+
+	container.add( geometryUserDataRow );
+
+	// Helpers
+
+	const helpersRow = new UIRow().setMarginLeft( '120px' );
+	container.add( helpersRow );
+
+	const vertexNormalsButton = new UIButton( strings.getKey( 'sidebar/geometry/show_vertex_normals' ) );
+	vertexNormalsButton.onClick( function () {
+
+		const object = editor.selected;
+
+		if ( editor.helpers[ object.id ] === undefined ) {
+
+			editor.addHelper( object, new VertexNormalsHelper( object, vertexNormalsSize.getValue() ) );
+
+		} else {
+
+			editor.removeHelper( object );
+
+		}
+
+		signals.sceneGraphChanged.dispatch();
+
+	} );
+	helpersRow.add( vertexNormalsButton );
+
+	const vertexNormalsSize = new UINumber( 1 ).setWidth( '30px' ).setMarginLeft( '7px' ).setRange( 0, Infinity ).onChange( function () {
+
+		const object = editor.selected;
+		const helper = editor.helpers[ object.id ];
+
+		if ( helper !== undefined && helper.isVertexNormalsHelper === true ) {
+
+			helper.size = vertexNormalsSize.getValue();
+
+			signals.objectChanged.dispatch( object );
+
+		}
+
+	} );
+	helpersRow.add( vertexNormalsSize );
+
+	// Export JSON
+
+	const exportJson = new UIButton( strings.getKey( 'sidebar/geometry/export' ) );
+	exportJson.setMarginLeft( '120px' );
+	exportJson.onClick( function () {
+
+		const object = editor.selected;
+		const geometry = object.geometry;
+
+		let output = geometry.toJSON();
+
+		try {
+
+			output = JSON.stringify( output, null, '\t' );
+			output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+		} catch ( e ) {
+
+			output = JSON.stringify( output );
+
+		}
+
+		editor.utils.save( new Blob( [ output ] ), `${ geometryName.getValue() || 'geometry' }.json` );
+
+	} );
+	container.add( exportJson );
+
+	// Morph Targets
+
+	const morphContainer = new UIDiv();
+	morphContainer.setMarginTop( '20px' );
+	morphContainer.setDisplay( 'none' );
+	container.add( morphContainer );
+
+	morphContainer.add( new UIText( strings.getKey( 'sidebar/geometry/morph' ) ).setTextTransform( 'uppercase' ) );
+	morphContainer.add( new UIBreak() );
+	morphContainer.add( new UIBreak() );
+
+	const morphList = new UIDiv();
+	morphContainer.add( morphList );
+
+	//
+
+	async function build() {
+
+		const object = editor.selected;
+
+		if ( object && object.geometry ) {
+
+			const geometry = object.geometry;
+
+			container.setDisplay( 'block' );
+
+			geometryType.setValue( geometry.type );
+
+			geometryUUID.setValue( geometry.uuid );
+			geometryName.setValue( geometry.name );
+
+			//
+
+			if ( currentGeometryType !== geometry.type ) {
+
+				parameters.clear();
+
+				if ( geometry.type === 'BufferGeometry' || geometry.type === 'InstancedBufferGeometry' ) {
+
+					parameters.add( new SidebarGeometryModifiers( editor, object ) );
+
+				} else {
+
+					const Panel = _GEOMETRY_PANELS[ geometry.type ];
+
+					if ( Panel !== undefined ) {
+
+						parameters.add( new Panel( editor, object ) );
+
+					}
+
+				}
+
+				currentGeometryType = geometry.type;
+
+			}
+
+			if ( geometry.boundingBox === null ) geometry.computeBoundingBox();
+
+			const boundingBox = geometry.boundingBox;
+			const x = Math.floor( ( boundingBox.max.x - boundingBox.min.x ) * 1000 ) / 1000;
+			const y = Math.floor( ( boundingBox.max.y - boundingBox.min.y ) * 1000 ) / 1000;
+			const z = Math.floor( ( boundingBox.max.z - boundingBox.min.z ) * 1000 ) / 1000;
+
+			geometryBoundingBox.setInnerHTML( `${x}<br/>${y}<br/>${z}` );
+
+			helpersRow.setDisplay( geometry.hasAttribute( 'normal' ) ? '' : 'none' );
+
+			geometryUserData.setValue( JSON.stringify( geometry.userData, null, '  ' ) );
+
+			//
+
+			const helper = editor.helpers[ object.id ];
+
+			if ( helper !== undefined && helper.isVertexNormalsHelper === true ) {
+
+				editor.removeHelper( object );
+				editor.addHelper( object, new VertexNormalsHelper( object, vertexNormalsSize.getValue() ) );
+
+			}
+
+			//
+
+			morphUIElements.length = 0;
+			morphList.clear();
+
+			if ( object.morphTargetInfluences ) {
+
+				const morphTargetDictionary = object.morphTargetDictionary;
+				const morphTargetInfluences = object.morphTargetInfluences;
+				const morphNames = Object.keys( morphTargetDictionary );
+
+				for ( let i = 0; i < morphNames.length; i ++ ) {
+
+					const name = morphNames[ i ];
+					morphList.add( new Morph( i, name, morphTargetInfluences ) );
+
+				}
+
+				morphContainer.setDisplay( '' );
+
+			} else {
+
+				morphContainer.setDisplay( 'none' );
+
+			}
+
+		}
+
+	}
+
+	const morphUIElements = [];
+
+	function Morph( index, name, morphTargetInfluences ) {
+
+		const container = new UIRow();
+
+		const morphName = new UIText( name ).setWidth( '200px' );
+		container.add( morphName );
+
+		const morphInfluence = new UINumber().setWidth( '60px' ).setRange( 0, 1 ).onChange( function updateMorphInfluence() {
+
+			morphTargetInfluences[ index ] = morphInfluence.getValue();
+			signals.objectChanged.dispatch( editor.selected );
+
+		} );
+		morphInfluence.setValue( morphTargetInfluences[ index ] );
+
+		container.add( morphInfluence );
+		morphUIElements.push( morphInfluence );
+
+		return container;
+
+	}
+
+
+	function refreshUI() {
+
+		const object = editor.selected;
+
+		if ( object !== null && object.morphTargetInfluences ) {
+
+			for ( let i = 0; i < morphUIElements.length; i ++ ) {
+
+				const element = morphUIElements[ i ];
+				element.setValue( object.morphTargetInfluences[ i ] );
+
+			}
+
+		}
+
+	}
+
+	signals.objectSelected.add( function () {
+
+		currentGeometryType = null;
+
+		build();
+
+	} );
+
+	signals.geometryChanged.add( build );
+	signals.morphTargetsUpdated.add( refreshUI );
+
+	return container;
+
+}
+
+export { SidebarGeometry };

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

@@ -0,0 +1,60 @@
+import { UICheckbox, UIRow, UIText } from './libs/ui.js';
+import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
+
+function SidebarMaterialBooleanProperty( editor, property, name ) {
+
+	const signals = editor.signals;
+
+	const container = new UIRow();
+	container.add( new UIText( name ).setClass( 'Label' ) );
+
+	const boolean = new UICheckbox().setLeft( '100px' ).onChange( onChange );
+	container.add( boolean );
+
+	let object = null;
+	let materialSlot = null;
+	let material = null;
+
+	function onChange() {
+
+		if ( material[ property ] !== boolean.getValue() ) {
+
+			editor.execute( new SetMaterialValueCommand( editor, object, property, boolean.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 ) {
+
+			boolean.setValue( material[ property ] );
+			container.setDisplay( '' );
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	}
+
+	//
+
+	signals.objectSelected.add( update );
+	signals.materialChanged.add( update );
+
+	return container;
+
+}
+
+export { SidebarMaterialBooleanProperty };

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

@@ -0,0 +1,87 @@
+import { UIColor, UINumber, UIRow, UIText } from './libs/ui.js';
+import { SetMaterialColorCommand } from './commands/SetMaterialColorCommand.js';
+import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
+
+function SidebarMaterialColorProperty( editor, property, name ) {
+
+	const signals = editor.signals;
+
+	const container = new UIRow();
+	container.add( new UIText( name ).setClass( 'Label' ) );
+
+	const color = new UIColor().onInput( onChange );
+	container.add( color );
+
+	let intensity;
+
+	if ( property === 'emissive' ) {
+
+		intensity = new UINumber( 1 ).setWidth( '30px' ).setRange( 0, Infinity ).onChange( onChange );
+		container.add( intensity );
+
+	}
+
+	let object = null;
+	let materialSlot = null;
+	let material = null;
+
+	function onChange() {
+
+		if ( material[ property ].getHex() !== color.getHexValue() ) {
+
+			editor.execute( new SetMaterialColorCommand( editor, object, property, color.getHexValue(), materialSlot ) );
+
+		}
+
+		if ( intensity !== undefined ) {
+
+			if ( material[ `${ property }Intensity` ] !== intensity.getValue() ) {
+
+				editor.execute( new SetMaterialValueCommand( editor, object, `${ property }Intensity`, intensity.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 ) {
+
+			color.setHexValue( material[ property ].getHexString() );
+
+			if ( intensity !== undefined ) {
+
+				intensity.setValue( material[ `${ property }Intensity` ] );
+
+			}
+
+			container.setDisplay( '' );
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	}
+
+	//
+
+	signals.objectSelected.add( update );
+	signals.materialChanged.add( update );
+
+	return container;
+
+}
+
+export { SidebarMaterialColorProperty };

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

@@ -0,0 +1,62 @@
+import { UIRow, UISelect, UIText } from './libs/ui.js';
+import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
+
+function SidebarMaterialConstantProperty( editor, property, name, options ) {
+
+	const signals = editor.signals;
+
+	const container = new UIRow();
+	container.add( new UIText( name ).setClass( 'Label' ) );
+
+	const constant = new UISelect().setOptions( options ).onChange( onChange );
+	container.add( constant );
+
+	let object = null;
+	let materialSlot = null;
+	let material = null;
+
+	function onChange() {
+
+		const value = parseInt( constant.getValue() );
+
+		if ( material[ property ] !== value ) {
+
+			editor.execute( new SetMaterialValueCommand( editor, object, property, value, 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 ) {
+
+			constant.setValue( material[ property ] );
+			container.setDisplay( '' );
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	}
+
+	//
+
+	signals.objectSelected.add( update );
+	signals.materialChanged.add( update );
+
+	return container;
+
+}
+
+export { SidebarMaterialConstantProperty };