@thanhthbm/scene-editor 0.1.0

package/src/editor/js/Script.js

@@ -0,0 +1,532 @@
+import { UIElement, UIPanel, UIText } from './libs/ui.js';
+
+import { SetScriptValueCommand } from './commands/SetScriptValueCommand.js';
+import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
+
+import buildThreeDefs from './libs/tern-threejs/build-defs.js';
+
+function Script( editor ) {
+
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	const container = new UIPanel();
+	container.setId( 'script' );
+	container.setPosition( 'absolute' );
+	container.setBackgroundColor( '#272822' );
+	container.setDisplay( 'none' );
+
+	const header = new UIPanel();
+	header.setPadding( '10px' );
+	container.add( header );
+
+	const title = new UIText().setColor( '#fff' );
+	header.add( title );
+
+	const buttonSVG = ( function () {
+
+		const svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+		svg.setAttribute( 'width', 32 );
+		svg.setAttribute( 'height', 32 );
+		const path = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+		path.setAttribute( 'd', 'M 12,12 L 22,22 M 22,12 12,22' );
+		path.setAttribute( 'stroke', '#fff' );
+		svg.appendChild( path );
+		return svg;
+
+	} )();
+
+	const close = new UIElement( buttonSVG );
+	close.setPosition( 'absolute' );
+	close.setTop( '3px' );
+	close.setRight( '1px' );
+	close.setCursor( 'pointer' );
+	close.onClick( function () {
+
+		container.setDisplay( 'none' );
+
+	} );
+	header.add( close );
+
+
+	let renderer;
+
+	signals.rendererCreated.add( function ( newRenderer ) {
+
+		renderer = newRenderer;
+
+	} );
+
+
+	let delay;
+	let currentMode;
+	let currentScript;
+	let currentObject;
+
+	const codemirror = CodeMirror( container.dom, {
+		value: '',
+		lineNumbers: true,
+		matchBrackets: true,
+		indentWithTabs: true,
+		tabSize: 4,
+		indentUnit: 4,
+		hintOptions: {
+			completeSingle: false
+		}
+	} );
+	codemirror.setOption( 'theme', 'monokai' );
+	codemirror.on( 'change', function () {
+
+		if ( codemirror.state.focused === false ) return;
+
+		clearTimeout( delay );
+		delay = setTimeout( function () {
+
+			const value = codemirror.getValue();
+
+			if ( ! validate( value ) ) return;
+
+			if ( typeof ( currentScript ) === 'object' ) {
+
+				if ( value !== currentScript.source ) {
+
+					editor.execute( new SetScriptValueCommand( editor, currentObject, currentScript, 'source', value ) );
+
+				}
+
+				return;
+
+			}
+
+			if ( currentScript !== 'programInfo' ) return;
+
+			const json = JSON.parse( value );
+
+			if ( JSON.stringify( currentObject.material.defines ) !== JSON.stringify( json.defines ) ) {
+
+				const cmd = new SetMaterialValueCommand( editor, currentObject, 'defines', json.defines );
+				cmd.updatable = false;
+				editor.execute( cmd );
+
+			}
+
+			if ( JSON.stringify( currentObject.material.uniforms ) !== JSON.stringify( json.uniforms ) ) {
+
+				const cmd = new SetMaterialValueCommand( editor, currentObject, 'uniforms', json.uniforms );
+				cmd.updatable = false;
+				editor.execute( cmd );
+
+			}
+
+			if ( JSON.stringify( currentObject.material.attributes ) !== JSON.stringify( json.attributes ) ) {
+
+				const cmd = new SetMaterialValueCommand( editor, currentObject, 'attributes', json.attributes );
+				cmd.updatable = false;
+				editor.execute( cmd );
+
+			}
+
+		}, 300 );
+
+	} );
+
+	// prevent backspace from deleting objects
+	const wrapper = codemirror.getWrapperElement();
+	wrapper.addEventListener( 'keydown', function ( event ) {
+
+		event.stopPropagation();
+
+	} );
+
+	// validate
+
+	const errorLines = [];
+	const widgets = [];
+
+	const validate = function ( string ) {
+
+		let valid;
+		let errors = [];
+
+		return codemirror.operation( function () {
+
+			while ( errorLines.length > 0 ) {
+
+				codemirror.removeLineClass( errorLines.shift(), 'background', 'errorLine' );
+
+			}
+
+			while ( widgets.length > 0 ) {
+
+				codemirror.removeLineWidget( widgets.shift() );
+
+			}
+
+			//
+
+			switch ( currentMode ) {
+
+				case 'javascript':
+
+					try {
+
+						const syntax = esprima.parse( string, { tolerant: true } );
+						errors = syntax.errors;
+
+					} catch ( error ) {
+
+						errors.push( {
+
+							lineNumber: error.lineNumber - 1,
+							message: error.message
+
+						} );
+
+					}
+
+					for ( let i = 0; i < errors.length; i ++ ) {
+
+						const error = errors[ i ];
+						error.message = error.message.replace( /Line [0-9]+: /, '' );
+
+					}
+
+					break;
+
+				case 'json':
+
+					errors = [];
+
+					jsonlint.parseError = function ( message, info ) {
+
+						message = message.split( '\n' )[ 3 ];
+
+						errors.push( {
+
+							lineNumber: info.loc.first_line - 1,
+							message: message
+
+						} );
+
+					};
+
+					try {
+
+						jsonlint.parse( string );
+
+					} catch ( error ) {
+
+						// ignore failed error recovery
+
+					}
+
+					break;
+
+				case 'glsl':
+
+					currentObject.material[ currentScript ] = string;
+					currentObject.material.needsUpdate = true;
+					signals.materialChanged.dispatch( currentObject, 0 ); // TODO: Add multi-material support
+
+					const programs = renderer.info.programs;
+
+					valid = true;
+					const parseMessage = /^(?:ERROR|WARNING): \d+:(\d+): (.*)/g;
+
+					for ( let i = 0, n = programs.length; i !== n; ++ i ) {
+
+						const diagnostics = programs[ i ].diagnostics;
+
+						if ( diagnostics === undefined ||
+								diagnostics.material !== currentObject.material ) continue;
+
+						if ( ! diagnostics.runnable ) valid = false;
+
+						const shaderInfo = diagnostics[ currentScript ];
+						const lineOffset = shaderInfo.prefix.split( /\r\n|\r|\n/ ).length;
+
+						while ( true ) {
+
+							const parseResult = parseMessage.exec( shaderInfo.log );
+							if ( parseResult === null ) break;
+
+							errors.push( {
+
+								lineNumber: parseResult[ 1 ] - lineOffset,
+								message: parseResult[ 2 ]
+
+							} );
+
+						} // messages
+
+						break;
+
+					} // programs
+
+			} // mode switch
+
+			for ( let i = 0; i < errors.length; i ++ ) {
+
+				const error = errors[ i ];
+
+				const message = document.createElement( 'div' );
+				message.className = 'esprima-error';
+				message.textContent = error.message;
+
+				const lineNumber = Math.max( error.lineNumber, 0 );
+				errorLines.push( lineNumber );
+
+				codemirror.addLineClass( lineNumber, 'background', 'errorLine' );
+
+				const widget = codemirror.addLineWidget( lineNumber, message );
+
+				widgets.push( widget );
+
+			}
+
+			return valid !== undefined ? valid : errors.length === 0;
+
+		} );
+
+	};
+
+	// tern js autocomplete
+
+	const server = new CodeMirror.TernServer( {
+		caseInsensitive: true
+	} );
+
+	// The three.js API definitions are built lazily from the JSDoc in the library
+	// build the first time the script editor is opened.
+
+	let threeDefsRequested = false;
+
+	async function loadThreeDefs() {
+
+		if ( threeDefsRequested ) return;
+		threeDefsRequested = true;
+
+		try {
+
+			const url = new URL( '../build/three.core.js', document.baseURI ).href;
+			const source = await ( await fetch( url ) ).text();
+
+			server.server.defs.push( buildThreeDefs( source ) );
+			server.server.reset();
+
+		} catch ( error ) {
+
+			console.warn( 'Script: Failed to build three.js autocomplete defs.', error );
+
+		}
+
+	}
+
+	codemirror.setOption( 'extraKeys', {
+		'Ctrl-Space': function ( cm ) {
+
+			server.complete( cm );
+
+		},
+		'Ctrl-I': function ( cm ) {
+
+			server.showType( cm );
+
+		},
+		'Ctrl-O': function ( cm ) {
+
+			server.showDocs( cm );
+
+		},
+		'Alt-.': function ( cm ) {
+
+			server.jumpToDef( cm );
+
+		},
+		'Alt-,': function ( cm ) {
+
+			server.jumpBack( cm );
+
+		},
+		'Ctrl-Q': function ( cm ) {
+
+			server.rename( cm );
+
+		},
+		'Ctrl-.': function ( cm ) {
+
+			server.selectName( cm );
+
+		}
+	} );
+
+	codemirror.on( 'cursorActivity', function ( cm ) {
+
+		if ( currentMode !== 'javascript' ) return;
+		server.updateArgHints( cm );
+
+	} );
+
+	codemirror.on( 'keypress', function ( cm, kb ) {
+
+		if ( currentMode !== 'javascript' ) return;
+		if ( /[\w\.]/.exec( kb.key ) ) {
+
+			server.complete( cm );
+
+		}
+
+	} );
+
+
+	//
+
+	signals.editorCleared.add( function () {
+
+		container.setDisplay( 'none' );
+
+	} );
+
+	function setTitle( object, script ) {
+
+		if ( typeof script === 'object' ) {
+
+			title.setValue( object.name + ' / ' + script.name );
+
+		} else {
+
+			switch ( script ) {
+
+				case 'vertexShader':
+
+					title.setValue( object.material.name + ' / ' + strings.getKey( 'script/title/vertexShader' ) );
+					break;
+
+				case 'fragmentShader':
+
+					title.setValue( object.material.name + ' / ' + strings.getKey( 'script/title/fragmentShader' ) );
+					break;
+
+				case 'programInfo':
+
+					title.setValue( object.material.name + ' / ' + strings.getKey( 'script/title/programInfo' ) );
+					break;
+
+				default:
+
+					throw new Error( 'setTitle: Unknown script' );
+
+			}
+
+		}
+
+	}
+
+	signals.editScript.add( function ( object, script ) {
+
+		let mode, source;
+
+		if ( typeof ( script ) === 'object' ) {
+
+			mode = 'javascript';
+			source = script.source;
+
+		} else {
+
+			switch ( script ) {
+
+				case 'vertexShader':
+
+					mode = 'glsl';
+					source = object.material.vertexShader || '';
+
+					break;
+
+				case 'fragmentShader':
+
+					mode = 'glsl';
+					source = object.material.fragmentShader || '';
+
+					break;
+
+				case 'programInfo':
+
+					mode = 'json';
+					const json = {
+						defines: object.material.defines,
+						uniforms: object.material.uniforms,
+						attributes: object.material.attributes
+					};
+					source = JSON.stringify( json, null, '\t' );
+
+					break;
+
+				default:
+
+					throw new Error( 'editScript: Unknown script' );
+
+			}
+
+		}
+
+		setTitle( object, script );
+
+		currentMode = mode;
+		currentScript = script;
+		currentObject = object;
+
+		if ( mode === 'javascript' ) loadThreeDefs();
+
+		container.setDisplay( '' );
+		codemirror.setValue( source );
+		codemirror.clearHistory();
+		if ( mode === 'json' ) mode = { name: 'javascript', json: true };
+		codemirror.setOption( 'mode', mode );
+
+	} );
+
+	signals.scriptRemoved.add( function ( script ) {
+
+		if ( currentScript === script ) {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	} );
+
+	signals.objectChanged.add( function ( object ) {
+
+		if ( object !== currentObject ) return;
+
+		if ( [ 'programInfo', 'vertexShader', 'fragmentShader' ].includes( currentScript ) ) return;
+
+		setTitle( currentObject, currentScript );
+
+	} );
+
+	signals.scriptChanged.add( function ( script ) {
+
+		if ( script === currentScript ) {
+
+			setTitle( currentObject, currentScript );
+
+		}
+
+	} );
+
+	signals.materialChanged.add( function ( object/*, slot */ ) {
+
+		if ( object !== currentObject ) return;
+
+		// TODO: Adds multi-material support
+
+		setTitle( currentObject, currentScript );
+
+	} );
+
+	return container;
+
+}
+
+export { Script };

package/src/editor/js/Selector.js

@@ -0,0 +1,129 @@
+import * as THREE from 'three';
+
+const mouse = new THREE.Vector2();
+const raycaster = new THREE.Raycaster();
+
+class Selector {
+
+	constructor( editor ) {
+
+		const signals = editor.signals;
+
+		this.editor = editor;
+		this.signals = signals;
+
+		// signals
+
+		signals.intersectionsDetected.add( ( intersects ) => {
+
+			if ( intersects.length > 0 ) {
+
+				// Resolve helpers to their actual objects
+
+				const objects = [];
+
+				for ( let i = 0; i < intersects.length; i ++ ) {
+
+					let object = intersects[ i ].object;
+
+					if ( object.userData.object !== undefined ) {
+
+						object = object.userData.object;
+
+					}
+
+					if ( objects.indexOf( object ) === - 1 ) {
+
+						objects.push( object );
+
+					}
+
+				}
+
+				// Cycle through objects if the first one is already selected
+
+				const index = objects.indexOf( editor.selected );
+
+				if ( index !== - 1 && index < objects.length - 1 ) {
+
+					this.select( objects[ index + 1 ] );
+
+				} else {
+
+					this.select( objects[ 0 ] );
+
+				}
+
+			} else {
+
+				this.select( null );
+
+			}
+
+		} );
+
+	}
+
+	getIntersects( raycaster ) {
+
+		const objects = [];
+
+		this.editor.scene.traverseVisible( function ( child ) {
+
+			objects.push( child );
+
+		} );
+
+		this.editor.sceneHelpers.traverseVisible( function ( child ) {
+
+			if ( child.name === 'picker' ) objects.push( child );
+
+		} );
+
+		return raycaster.intersectObjects( objects, false );
+
+	}
+
+	getPointerIntersects( point, camera ) {
+
+		mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );
+
+		raycaster.setFromCamera( mouse, camera );
+
+		return this.getIntersects( raycaster );
+
+	}
+
+	select( object ) {
+
+		if ( this.editor.selected === object ) return;
+
+		let uuid = null;
+
+		if ( object !== null ) {
+
+			uuid = object.uuid;
+
+		}
+
+		this.editor.selected = object;
+		this.editor.config.setKey( 'selected', uuid );
+
+		// single-select clears any multi-selection (Spline-like)
+		if ( object !== null ) this.editor.selectedObjects = [ object ];
+		else this.editor.selectedObjects = [];
+
+		this.signals.objectSelected.dispatch( object );
+		this.signals.objectMultiSelected.dispatch( this.editor.selectedObjects );
+
+	}
+
+	deselect() {
+
+		this.select( null );
+
+	}
+
+}
+
+export { Selector };