@thanhthbm/scene-editor 0.1.0

package/src/editor/js/Sidebar.Project.App.js

@@ -0,0 +1,218 @@
+import * as THREE from 'three';
+
+import { zipSync, strToU8 } from 'three/addons/libs/fflate.module.js';
+
+import { UIButton, UICheckbox, UIPanel, UIInput, UIRow, UIText } from './libs/ui.js';
+
+function SidebarProjectApp( editor ) {
+
+	const config = editor.config;
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	const save = editor.utils.save;
+
+	const container = new UIPanel();
+	container.setId( 'app' );
+
+	const headerRow = new UIRow();
+	headerRow.add( new UIText( strings.getKey( 'sidebar/project/app' ).toUpperCase() ) );
+	container.add( headerRow );
+
+	// Title
+
+	const titleRow = new UIRow();
+	const title = new UIInput( config.getKey( 'project/title' ) ).setLeft( '100px' ).setWidth( '150px' ).onChange( function () {
+
+		config.setKey( 'project/title', this.getValue() );
+
+	} );
+
+	titleRow.add( new UIText( strings.getKey( 'sidebar/project/app/title' ) ).setClass( 'Label' ) );
+	titleRow.add( title );
+
+	container.add( titleRow );
+
+	// Editable
+
+	const editableRow = new UIRow();
+	const editable = new UICheckbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
+
+		config.setKey( 'project/editable', this.getValue() );
+
+	} );
+
+	editableRow.add( new UIText( strings.getKey( 'sidebar/project/app/editable' ) ).setClass( 'Label' ) );
+	editableRow.add( editable );
+
+	container.add( editableRow );
+
+	// Play/Stop
+
+	let isPlaying = false;
+
+	const playButton = new UIButton( strings.getKey( 'sidebar/project/app/play' ) );
+	playButton.setWidth( '170px' );
+	playButton.setMarginLeft( '120px' );
+	playButton.setMarginBottom( '10px' );
+	playButton.onClick( function () {
+
+		if ( isPlaying === false ) {
+
+			isPlaying = true;
+			playButton.setTextContent( strings.getKey( 'sidebar/project/app/stop' ) );
+			signals.startPlayer.dispatch();
+
+		} else {
+
+			isPlaying = false;
+			playButton.setTextContent( strings.getKey( 'sidebar/project/app/play' ) );
+			signals.stopPlayer.dispatch();
+
+		}
+
+	} );
+
+	container.add( playButton );
+
+	// Publish
+
+	const publishButton = new UIButton( strings.getKey( 'sidebar/project/app/publish' ) );
+	publishButton.setWidth( '170px' );
+	publishButton.setMarginLeft( '120px' );
+	publishButton.setMarginBottom( '10px' );
+	publishButton.onClick( function () {
+
+		const toZip = {};
+
+		const rendererType = config.getKey( 'project/renderer/type' );
+
+		//
+
+		let output = editor.toJSON();
+		output.metadata.type = 'App';
+		delete output.history;
+
+		output = JSON.stringify( output, null, '\t' );
+		output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+		toZip[ 'app.json' ] = strToU8( output );
+
+		//
+
+		const title = config.getKey( 'project/title' );
+
+		const manager = new THREE.LoadingManager( function () {
+
+			const zipped = zipSync( toZip, { level: 9 } );
+
+			const blob = new Blob( [ zipped.buffer ], { type: 'application/zip' } );
+
+			save( blob, ( title !== '' ? title : 'untitled' ) + '.zip' );
+
+		} );
+
+		const loader = new THREE.FileLoader( manager );
+		loader.load( 'js/libs/app/index.html', function ( content ) {
+
+			content = content.replace( '<!-- title -->', title );
+
+			//
+
+			const IMPORTMAP = {
+				WebGLRenderer: {
+					imports: {
+						'three': './js/three.module.js'
+					}
+				},
+				WebGPURenderer: {
+					imports: {
+						'three': './js/three.webgpu.js',
+						'three/webgpu': './js/three.webgpu.js'
+					}
+				}
+			};
+			const importmap = JSON.stringify( IMPORTMAP[ rendererType ], null, '\t' );
+			content = content.replace( '<!-- importmap -->', indent( '\n' + indent( importmap, 1 ) + '\n', 2 ) );
+
+			//
+
+			let editButton = '';
+
+			if ( config.getKey( 'project/editable' ) ) {
+
+				editButton = [
+					'			let button = document.createElement( \'a\' );',
+					'			button.href = \'https://threejs.org/editor/#file=\' + location.href.split( \'/\' ).slice( 0, - 1 ).join( \'/\' ) + \'/app.json\';',
+					'			button.style.cssText = \'position: absolute; bottom: 20px; right: 20px; padding: 10px 16px; color: #fff; border: 1px solid #fff; border-radius: 20px; text-decoration: none;\';',
+					'			button.target = \'_blank\';',
+					'			button.textContent = \'EDIT\';',
+					'			document.body.appendChild( button );',
+				].join( '\n' );
+
+			}
+
+			content = content.replace( '\t\t\t/* edit button */', editButton );
+
+			toZip[ 'index.html' ] = strToU8( content );
+
+		} );
+		loader.load( 'js/libs/app.js', function ( content ) {
+
+			toZip[ 'js/app.js' ] = strToU8( content );
+
+		} );
+		loader.load( '../build/three.core.js', function ( content ) {
+
+			toZip[ 'js/three.core.js' ] = strToU8( content );
+
+		} );
+
+		if ( rendererType === 'WebGPURenderer' ) {
+
+			loader.load( '../build/three.webgpu.js', function ( content ) {
+
+				toZip[ 'js/three.webgpu.js' ] = strToU8( content );
+
+			} );
+
+		} else {
+
+			loader.load( '../build/three.module.js', function ( content ) {
+
+				toZip[ 'js/three.module.js' ] = strToU8( content );
+
+			} );
+
+		}
+
+	} );
+	container.add( publishButton );
+
+	// Signals
+
+	signals.editorCleared.add( function () {
+
+		title.setValue( '' );
+		config.setKey( 'project/title', '' );
+
+	} );
+
+	return container;
+
+}
+
+//
+
+function indent( text, count, space = '\t' ) {
+
+	return text
+		.split( '\n' )
+		.map( line => space.repeat( count ) + line )
+		.join( '\n' );
+
+}
+
+//
+
+export { SidebarProjectApp };

package/src/editor/js/Sidebar.Project.Materials.js

@@ -0,0 +1,82 @@
+import { UIBreak, UIPanel, UIRow, UIText, UIListbox, UIButton } from './libs/ui.js';
+
+import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
+
+function SidebarProjectMaterials( editor ) {
+
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	const container = new UIPanel();
+
+	const headerRow = new UIRow();
+	headerRow.add( new UIText( strings.getKey( 'sidebar/project/materials' ).toUpperCase() ) );
+
+	container.add( headerRow );
+
+	const listbox = new UIListbox();
+	container.add( listbox );
+
+	container.add( new UIBreak() );
+
+	const buttonsRow = new UIRow();
+	container.add( buttonsRow );
+
+	const assignMaterial = new UIButton( strings.getKey( 'sidebar/project/Assign' ) );
+	assignMaterial.onClick( function () {
+
+		const selectedObject = editor.selected;
+
+		if ( selectedObject !== null ) {
+
+			const oldMaterial = selectedObject.material;
+
+			// only passing materials to objects with a material property (e.g. avoid assigning material to THREE.Group)
+
+			if ( oldMaterial !== undefined ) {
+
+				const material = editor.getMaterialById( parseInt( listbox.getValue() ) );
+
+				if ( material !== undefined ) {
+
+					editor.removeMaterial( oldMaterial );
+					editor.execute( new SetMaterialCommand( editor, selectedObject, material ) );
+					editor.addMaterial( material );
+
+				}
+
+			}
+
+		}
+
+	} );
+	buttonsRow.add( assignMaterial );
+
+	// Signals
+
+	function refreshMaterialBrowserUI() {
+
+		listbox.setItems( Object.values( editor.materials ) );
+
+	}
+
+	signals.objectSelected.add( function ( object ) {
+
+		if ( object !== null ) {
+
+			const index = Object.values( editor.materials ).indexOf( object.material );
+			listbox.selectIndex( index );
+
+		}
+
+	} );
+
+	signals.materialAdded.add( refreshMaterialBrowserUI );
+	signals.materialChanged.add( refreshMaterialBrowserUI );
+	signals.materialRemoved.add( refreshMaterialBrowserUI );
+
+	return container;
+
+}
+
+export { SidebarProjectMaterials };

package/src/editor/js/Sidebar.Project.Renderer.js

@@ -0,0 +1,193 @@
+import * as THREE from 'three';
+
+import { UINumber, UIPanel, UIRow, UISelect, UIText } from './libs/ui.js';
+import { UIBoolean } from './libs/ui.three.js';
+
+function SidebarProjectRenderer( editor ) {
+
+	const config = editor.config;
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	let currentRenderer = null;
+
+	const container = new UIPanel();
+	container.setBorderTop( '0px' );
+
+	// Camera
+
+	const cameraRow = new UIRow();
+	container.add( cameraRow );
+
+	cameraRow.add( new UIText( strings.getKey( 'sidebar/project/camera' ) ).setClass( 'Label' ) );
+
+	const cameraTypeSelect = new UISelect().setOptions( {
+		'perspective': 'Perspective',
+		'orthographic': 'Orthographic'
+	} ).setWidth( '150px' ).onChange( function () {
+
+		editor.setCameraType( this.getValue() );
+
+	} );
+	cameraTypeSelect.setValue( config.getKey( 'project/camera' ) );
+	cameraRow.add( cameraTypeSelect );
+
+	if ( config.getKey( 'project/camera' ) === 'orthographic' ) {
+
+		editor.setCameraType( 'orthographic' );
+
+	}
+
+	// Renderer
+
+	const rendererRow = new UIRow();
+	container.add( rendererRow );
+
+	rendererRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ) ).setClass( 'Label' ) );
+
+	const rendererTypeSelect = new UISelect().setOptions( {
+		'WebGLRenderer': 'WebGL'
+	} ).setWidth( '150px' ).onChange( createRenderer );
+	rendererTypeSelect.setValue( config.getKey( 'project/renderer/type' ) );
+	rendererRow.add( rendererTypeSelect );
+
+	// Antialias
+
+	const antialiasRow = new UIRow();
+	container.add( antialiasRow );
+
+	antialiasRow.add( new UIText( strings.getKey( 'sidebar/project/antialias' ) ).setClass( 'Label' ) );
+
+	const antialiasBoolean = new UIBoolean( config.getKey( 'project/renderer/antialias' ) ).onChange( createRenderer );
+	antialiasRow.add( antialiasBoolean );
+
+	// Shadows
+
+	const shadowsRow = new UIRow();
+	container.add( shadowsRow );
+
+	shadowsRow.add( new UIText( strings.getKey( 'sidebar/project/shadows' ) ).setClass( 'Label' ) );
+
+	const shadowsBoolean = new UIBoolean( config.getKey( 'project/renderer/shadows' ) ).onChange( updateShadows );
+	shadowsRow.add( shadowsBoolean );
+
+	const shadowTypeSelect = new UISelect().setOptions( {
+		0: 'Basic',
+		1: 'PCF',
+		3: 'VSM'
+	} ).setWidth( '125px' ).onChange( updateShadows );
+	shadowTypeSelect.setValue( config.getKey( 'project/renderer/shadowType' ) );
+	shadowsRow.add( shadowTypeSelect );
+
+	function updateShadows() {
+
+		currentRenderer.shadowMap.enabled = shadowsBoolean.getValue();
+		currentRenderer.shadowMap.type = parseFloat( shadowTypeSelect.getValue() );
+
+		signals.rendererUpdated.dispatch();
+
+	}
+
+	// Tonemapping
+
+	const toneMappingRow = new UIRow();
+	container.add( toneMappingRow );
+
+	toneMappingRow.add( new UIText( strings.getKey( 'sidebar/project/toneMapping' ) ).setClass( 'Label' ) );
+
+	const toneMappingSelect = new UISelect().setOptions( {
+		0: 'No',
+		1: 'Linear',
+		2: 'Reinhard',
+		3: 'Cineon',
+		4: 'ACESFilmic',
+		6: 'AgX',
+		7: 'Neutral'
+	} ).setWidth( '120px' ).onChange( updateToneMapping );
+	toneMappingSelect.setValue( config.getKey( 'project/renderer/toneMapping' ) );
+	toneMappingRow.add( toneMappingSelect );
+
+	const toneMappingExposure = new UINumber( config.getKey( 'project/renderer/toneMappingExposure' ) );
+	toneMappingExposure.setDisplay( toneMappingSelect.getValue() === '0' ? 'none' : '' );
+	toneMappingExposure.setWidth( '30px' ).setMarginLeft( '10px' );
+	toneMappingExposure.setRange( 0, 10 );
+	toneMappingExposure.onChange( updateToneMapping );
+	toneMappingRow.add( toneMappingExposure );
+
+	function updateToneMapping() {
+
+		toneMappingExposure.setDisplay( toneMappingSelect.getValue() === '0' ? 'none' : '' );
+
+		currentRenderer.toneMapping = parseFloat( toneMappingSelect.getValue() );
+		currentRenderer.toneMappingExposure = toneMappingExposure.getValue();
+		signals.rendererUpdated.dispatch();
+
+	}
+
+	//
+
+	function createRenderer() {
+
+		const antialias = antialiasBoolean.getValue();
+
+		currentRenderer = new THREE.WebGLRenderer( { antialias: antialias, reversedDepthBuffer: true } );
+
+		currentRenderer.shadowMap.enabled = shadowsBoolean.getValue();
+		currentRenderer.shadowMap.type = parseFloat( shadowTypeSelect.getValue() );
+		currentRenderer.toneMapping = parseFloat( toneMappingSelect.getValue() );
+		currentRenderer.toneMappingExposure = toneMappingExposure.getValue();
+
+		signals.rendererCreated.dispatch( currentRenderer );
+		signals.rendererUpdated.dispatch();
+
+	}
+
+	createRenderer();
+
+
+	// Signals
+
+	signals.cameraResetted.add( function () {
+
+		const type = editor.camera.isOrthographicCamera ? 'orthographic' : 'perspective';
+
+		cameraTypeSelect.setValue( type );
+		config.setKey( 'project/camera', type );
+
+	} );
+
+	signals.editorCleared.add( function () {
+
+		currentRenderer.shadowMap.enabled = true;
+		currentRenderer.shadowMap.type = THREE.PCFShadowMap;
+		currentRenderer.toneMapping = THREE.NeutralToneMapping;
+		currentRenderer.toneMappingExposure = 1;
+
+		shadowsBoolean.setValue( currentRenderer.shadowMap.enabled );
+		shadowTypeSelect.setValue( currentRenderer.shadowMap.type );
+		toneMappingSelect.setValue( currentRenderer.toneMapping );
+		toneMappingExposure.setValue( currentRenderer.toneMappingExposure );
+		toneMappingExposure.setDisplay( currentRenderer.toneMapping === 0 ? 'none' : '' );
+
+		signals.rendererUpdated.dispatch();
+
+	} );
+
+	signals.rendererUpdated.add( function () {
+
+		config.setKey(
+			'project/renderer/type', rendererTypeSelect.getValue(),
+			'project/renderer/antialias', antialiasBoolean.getValue(),
+			'project/renderer/shadows', shadowsBoolean.getValue(),
+			'project/renderer/shadowType', parseFloat( shadowTypeSelect.getValue() ),
+			'project/renderer/toneMapping', parseFloat( toneMappingSelect.getValue() ),
+			'project/renderer/toneMappingExposure', toneMappingExposure.getValue()
+		);
+
+	} );
+
+	return container;
+
+}
+
+export { SidebarProjectRenderer };