spoint 0.1.0 → 0.1.10

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

@@ -0,0 +1,165 @@
+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 = {};
+
+		//
+
+		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 );
+
+			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.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;
+
+}
+
+export { SidebarProjectApp };

package/client/editor/js/Sidebar.Project.Image.js

@@ -0,0 +1,225 @@
+import * as THREE from 'three';
+
+import { UIBreak, UIButton, UIInteger, UIPanel, UIRow, UISelect, UIText } from './libs/ui.js';
+
+import { ViewportPathtracer } from './Viewport.Pathtracer.js';
+
+function SidebarProjectImage( editor ) {
+
+	const strings = editor.strings;
+
+	const container = new UIPanel();
+	container.setId( 'render' );
+
+	// Image
+
+	container.add( new UIText( strings.getKey( 'sidebar/project/image' ) ).setTextTransform( 'uppercase' ) );
+	container.add( new UIBreak(), new UIBreak() );
+
+	// Shading
+
+	const shadingRow = new UIRow();
+	container.add( shadingRow );
+
+	shadingRow.add( new UIText( strings.getKey( 'sidebar/project/shading' ) ).setClass( 'Label' ) );
+
+	const shadingTypeSelect = new UISelect().setOptions( {
+		'solid': 'SOLID',
+		'realistic': 'REALISTIC'
+	} ).setWidth( '170px' ).onChange( refreshShadingRow ).setValue( 'solid' );
+	shadingRow.add( shadingTypeSelect );
+
+	const pathTracerMinSamples = 3;
+	const pathTracerMaxSamples = 65536;
+	const samplesNumber = new UIInteger( 16 ).setRange( pathTracerMinSamples, pathTracerMaxSamples );
+
+	const samplesRow = new UIRow();
+	samplesRow.add( new UIText( strings.getKey( 'sidebar/project/image/samples' ) ).setClass( 'Label' ) );
+	samplesRow.add( samplesNumber );
+
+	container.add( samplesRow );
+
+	function refreshShadingRow() {
+
+		samplesRow.setHidden( shadingTypeSelect.getValue() !== 'realistic' );
+
+	}
+
+	refreshShadingRow();
+
+	// Resolution
+
+	const resolutionRow = new UIRow();
+	container.add( resolutionRow );
+
+	resolutionRow.add( new UIText( strings.getKey( 'sidebar/project/resolution' ) ).setClass( 'Label' ) );
+
+	const imageWidth = new UIInteger( 1024 ).setTextAlign( 'center' ).setWidth( '28px' );
+	resolutionRow.add( imageWidth );
+
+	resolutionRow.add( new UIText( '×' ).setTextAlign( 'center' ).setFontSize( '12px' ).setWidth( '12px' ) );
+
+	const imageHeight = new UIInteger( 1024 ).setTextAlign( 'center' ).setWidth( '28px' );
+	resolutionRow.add( imageHeight );
+
+	// Render
+
+	const renderButton = new UIButton( strings.getKey( 'sidebar/project/render' ) );
+	renderButton.setWidth( '170px' );
+	renderButton.setMarginLeft( '120px' );
+	renderButton.onClick( async () => {
+
+		if ( shadingTypeSelect.getValue() === 'realistic' ) {
+
+			let isMaterialsValid = true;
+
+			editor.scene.traverseVisible( ( object ) => {
+
+				if ( object.isMesh ) {
+
+					const materials = Array.isArray( object.material ) ? object.material : [ object.material ];
+
+					for ( let i = 0; i < materials.length; i ++ ) {
+
+						const material = materials[ i ];
+
+						if ( ! material.isMeshStandardMaterial ) {
+
+							isMaterialsValid = false;
+							return;
+
+						}
+
+					}
+
+				}
+
+			} );
+
+			if ( isMaterialsValid === false ) {
+
+				alert( strings.getKey( 'prompt/rendering/realistic/unsupportedMaterial' ) );
+				return;
+
+			}
+
+		}
+
+		//
+
+		const json = editor.toJSON();
+		const project = json.project;
+
+		//
+
+		const loader = new THREE.ObjectLoader();
+
+		const camera = loader.parse( json.camera );
+		camera.aspect = imageWidth.getValue() / imageHeight.getValue();
+		camera.updateProjectionMatrix();
+		camera.updateMatrixWorld();
+
+		const scene = loader.parse( json.scene );
+
+		const renderer = new THREE.WebGLRenderer( { antialias: true } );
+		renderer.setSize( imageWidth.getValue(), imageHeight.getValue() );
+
+		if ( project.shadows !== undefined ) renderer.shadowMap.enabled = project.shadows;
+		if ( project.shadowType !== undefined ) renderer.shadowMap.type = project.shadowType;
+		if ( project.toneMapping !== undefined ) renderer.toneMapping = project.toneMapping;
+		if ( project.toneMappingExposure !== undefined ) renderer.toneMappingExposure = project.toneMappingExposure;
+
+		// popup
+
+		const width = imageWidth.getValue() / window.devicePixelRatio;
+		const height = imageHeight.getValue() / window.devicePixelRatio;
+
+		const left = ( screen.width - width ) / 2;
+		const top = ( screen.height - height ) / 2;
+
+		const output = window.open( '', '_blank', `location=no,left=${left},top=${top},width=${width},height=${height}` );
+
+		const meta = document.createElement( 'meta' );
+		meta.name = 'viewport';
+		meta.content = 'width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0';
+		output.document.head.appendChild( meta );
+
+		output.document.body.style.background = '#000';
+		output.document.body.style.margin = '0px';
+		output.document.body.style.overflow = 'hidden';
+
+		const canvas = renderer.domElement;
+		canvas.style.width = width + 'px';
+		canvas.style.height = height + 'px';
+		output.document.body.appendChild( canvas );
+
+		//
+
+		switch ( shadingTypeSelect.getValue() ) {
+
+			case 'solid':
+
+				renderer.render( scene, camera );
+				renderer.dispose();
+
+				break;
+
+			case 'realistic':
+
+				const status = document.createElement( 'div' );
+				status.style.position = 'absolute';
+				status.style.top = '10px';
+				status.style.left = '10px';
+				status.style.color = 'white';
+				status.style.fontFamily = 'system-ui';
+				status.style.fontSize = '12px';
+				output.document.body.appendChild( status );
+
+				const pathTracer = new ViewportPathtracer( renderer );
+				pathTracer.init( scene, camera );
+				pathTracer.setSize( imageWidth.getValue(), imageHeight.getValue() );
+
+				const maxSamples = Math.max( pathTracerMinSamples, Math.min( pathTracerMaxSamples, samplesNumber.getValue() ) );
+
+				function animate() {
+
+					if ( output.closed === true ) return;
+
+					const samples = Math.floor( pathTracer.getSamples() ) + 1;
+
+					if ( samples < maxSamples ) {
+
+						requestAnimationFrame( animate );
+
+					}
+
+					pathTracer.update();
+
+					const progress = Math.floor( samples / maxSamples * 100 );
+
+					status.textContent = `${ samples } / ${ maxSamples } ( ${ progress }% )`;
+
+					if ( progress === 100 ) {
+
+						status.textContent += ' ✓';
+
+					}
+
+				}
+
+				animate();
+
+				break;
+
+		}
+
+	} );
+	container.add( renderButton );
+
+	//
+
+	return container;
+
+}
+
+export { SidebarProjectImage };

package/client/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 assing 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/client/editor/js/Sidebar.Project.Renderer.js

@@ -0,0 +1,144 @@
+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' );
+
+	// 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',
+		2: 'PCF Soft',
+		//	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() {
+
+		currentRenderer = new THREE.WebGLRenderer( { antialias: antialiasBoolean.getValue() } );
+		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.editorCleared.add( function () {
+
+		currentRenderer.shadowMap.enabled = true;
+		currentRenderer.shadowMap.type = THREE.PCFShadowMap;
+		currentRenderer.toneMapping = THREE.NoToneMapping;
+		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/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 };