@thanhthbm/scene-editor 0.1.0

package/src/editor/js/EditorControls.js

@@ -0,0 +1,489 @@
+import * as THREE from 'three';
+
+class EditorControls extends THREE.EventDispatcher {
+
+	constructor( object ) {
+
+		super();
+
+		// API
+
+		this.enabled = true;
+		this.center = new THREE.Vector3();
+		this.panSpeed = 0.002;
+		this.zoomSpeed = 0.1;
+		this.rotationSpeed = 0.005;
+
+		// internals
+
+		var scope = this;
+		var vector = new THREE.Vector3();
+		var delta = new THREE.Vector3();
+		var box = new THREE.Box3();
+
+		var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2 };
+		var state = STATE.NONE;
+
+		var center = this.center;
+		var normalMatrix = new THREE.Matrix3();
+		var pointer = new THREE.Vector2();
+		var pointerOld = new THREE.Vector2();
+		var spherical = new THREE.Spherical();
+		var sphere = new THREE.Sphere();
+
+		var pointers = [];
+		var pointerPositions = {};
+
+		var domElement = null;
+
+		// events
+
+		var changeEvent = { type: 'change' };
+
+		this.setCamera = function ( camera ) {
+
+			object = camera;
+
+		};
+
+		this.focus = function ( target ) {
+
+			var distance;
+
+			box.setFromObject( target );
+
+			if ( box.isEmpty() === false ) {
+
+				box.getCenter( center );
+				distance = box.getBoundingSphere( sphere ).radius;
+
+			} else {
+
+				// Focusing on an Group, AmbientLight, etc
+
+				center.setFromMatrixPosition( target.matrixWorld );
+				distance = 0.1;
+
+			}
+
+			delta.set( 0, 0, 1 );
+			delta.applyQuaternion( object.quaternion );
+			delta.multiplyScalar( distance * 4 );
+
+			object.position.copy( center ).add( delta );
+
+			if ( object.isOrthographicCamera ) {
+
+				object.zoom = ( object.top - object.bottom ) / ( distance * 2 );
+				object.updateProjectionMatrix();
+
+			}
+
+			scope.dispatchEvent( changeEvent );
+
+		};
+
+		this.pan = function ( delta ) {
+
+			var distance = object.isOrthographicCamera
+				? ( object.top - object.bottom ) / object.zoom
+				: object.position.distanceTo( center );
+
+			delta.multiplyScalar( distance * scope.panSpeed );
+			delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
+
+			object.position.add( delta );
+			center.add( delta );
+
+			scope.dispatchEvent( changeEvent );
+
+		};
+
+		this.zoom = function ( delta ) {
+
+			if ( object.isOrthographicCamera ) {
+
+				object.zoom = Math.max( 0.0001, object.zoom * Math.pow( 0.95, delta.z ) );
+				object.updateProjectionMatrix();
+
+			} else {
+
+				var distance = object.position.distanceTo( center );
+
+				delta.multiplyScalar( distance * scope.zoomSpeed );
+
+				if ( delta.length() > distance ) return;
+
+				delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
+
+				object.position.add( delta );
+
+			}
+
+			scope.dispatchEvent( changeEvent );
+
+		};
+
+		this.rotate = function ( delta ) {
+
+			vector.copy( object.position ).sub( center );
+
+			spherical.setFromVector3( vector );
+
+			spherical.theta += delta.x * scope.rotationSpeed;
+			spherical.phi += delta.y * scope.rotationSpeed;
+
+			spherical.makeSafe();
+
+			vector.setFromSpherical( spherical );
+
+			object.position.copy( center ).add( vector );
+
+			object.lookAt( center );
+
+			scope.dispatchEvent( changeEvent );
+
+		};
+
+		//
+
+		function onPointerDown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( pointers.length === 0 ) {
+
+				domElement.setPointerCapture( event.pointerId );
+
+				domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
+				domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
+
+			}
+
+			//
+
+			if ( isTrackingPointer( event ) ) return;
+
+			//
+
+			addPointer( event );
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchStart( event );
+
+			} else {
+
+				onMouseDown( event );
+
+			}
+
+		}
+
+		function onPointerMove( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchMove( event );
+
+			} else {
+
+				onMouseMove( event );
+
+			}
+
+		}
+
+		function onPointerUp( event ) {
+
+			removePointer( event );
+
+			switch ( pointers.length ) {
+
+				case 0:
+
+					domElement.releasePointerCapture( event.pointerId );
+
+					domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
+					domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
+
+					break;
+
+				case 1:
+
+					var pointerId = pointers[ 0 ];
+					var position = pointerPositions[ pointerId ];
+
+					// minimal placeholder event - allows state correction on pointer-up
+					onTouchStart( { pointerId: pointerId, pageX: position.x, pageY: position.y } );
+
+					break;
+
+			}
+
+		}
+
+		// mouse
+
+		function onMouseDown( event ) {
+
+			if ( event.button === 0 ) {
+
+				state = STATE.ROTATE;
+
+			} else if ( event.button === 1 ) {
+
+				state = STATE.ZOOM;
+
+			} else if ( event.button === 2 ) {
+
+				state = STATE.PAN;
+
+			}
+
+			pointerOld.set( event.clientX, event.clientY );
+
+		}
+
+		function onMouseMove( event ) {
+
+			pointer.set( event.clientX, event.clientY );
+
+			var movementX = pointer.x - pointerOld.x;
+			var movementY = pointer.y - pointerOld.y;
+
+			if ( state === STATE.ROTATE ) {
+
+				scope.rotate( delta.set( - movementX, - movementY, 0 ) );
+
+			} else if ( state === STATE.ZOOM ) {
+
+				scope.zoom( delta.set( 0, 0, movementY ) );
+
+			} else if ( state === STATE.PAN ) {
+
+				scope.pan( delta.set( - movementX, movementY, 0 ) );
+
+			}
+
+			pointerOld.set( event.clientX, event.clientY );
+
+		}
+
+		function onMouseUp() {
+
+			state = STATE.NONE;
+
+		}
+
+		function onMouseWheel( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			event.preventDefault();
+
+			// Normalize deltaY due to https://bugzilla.mozilla.org/show_bug.cgi?id=1392460
+			scope.zoom( delta.set( 0, 0, event.deltaY > 0 ? 1 : - 1 ) );
+
+		}
+
+		function contextmenu( event ) {
+
+			event.preventDefault();
+
+		}
+
+		this.connect = function ( element ) {
+
+			if ( domElement !== null ) this.disconnect();
+
+			domElement = element;
+
+			domElement.addEventListener( 'contextmenu', contextmenu );
+			domElement.addEventListener( 'dblclick', onMouseUp );
+			domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
+
+			domElement.addEventListener( 'pointerdown', onPointerDown );
+
+		};
+
+		this.disconnect = function () {
+
+			domElement.removeEventListener( 'contextmenu', contextmenu );
+			domElement.removeEventListener( 'dblclick', onMouseUp );
+			domElement.removeEventListener( 'wheel', onMouseWheel );
+
+			domElement.removeEventListener( 'pointerdown', onPointerDown );
+
+			domElement = null;
+
+		};
+
+		// touch
+
+		var touches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
+		var prevTouches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
+
+		var prevDistance = null;
+
+		function onTouchStart( event ) {
+
+			trackPointer( event );
+
+			switch ( pointers.length ) {
+
+				case 1:
+					touches[ 0 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					touches[ 1 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					break;
+
+				case 2:
+
+					var position = getSecondPointerPosition( event );
+
+					touches[ 0 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					touches[ 1 ].set( position.x, position.y, 0 ).divideScalar( window.devicePixelRatio );
+					prevDistance = touches[ 0 ].distanceTo( touches[ 1 ] );
+					break;
+
+			}
+
+			prevTouches[ 0 ].copy( touches[ 0 ] );
+			prevTouches[ 1 ].copy( touches[ 1 ] );
+
+		}
+
+
+		function onTouchMove( event ) {
+
+			trackPointer( event );
+
+			function getClosest( touch, touches ) {
+
+				var closest = touches[ 0 ];
+
+				for ( var touch2 of touches ) {
+
+					if ( closest.distanceTo( touch ) > touch2.distanceTo( touch ) ) closest = touch2;
+
+				}
+
+				return closest;
+
+			}
+
+			switch ( pointers.length ) {
+
+				case 1:
+					touches[ 0 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					touches[ 1 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					scope.rotate( touches[ 0 ].sub( getClosest( touches[ 0 ], prevTouches ) ).multiplyScalar( - 1 ) );
+					break;
+
+				case 2:
+
+					var position = getSecondPointerPosition( event );
+
+					touches[ 0 ].set( event.pageX, event.pageY, 0 ).divideScalar( window.devicePixelRatio );
+					touches[ 1 ].set( position.x, position.y, 0 ).divideScalar( window.devicePixelRatio );
+					// Divide by 10 to offset inherent over-sensitivity (https://github.com/mrdoob/three.js/issues/32442)
+					var distance = touches[ 0 ].distanceTo( touches[ 1 ] ) / 10;
+					scope.zoom( delta.set( 0, 0, prevDistance - distance ) );
+					prevDistance = distance;
+
+
+					var offset0 = touches[ 0 ].clone().sub( getClosest( touches[ 0 ], prevTouches ) );
+					var offset1 = touches[ 1 ].clone().sub( getClosest( touches[ 1 ], prevTouches ) );
+					offset0.x = - offset0.x;
+					offset1.x = - offset1.x;
+
+					scope.pan( offset0.add( offset1 ) );
+
+					break;
+
+			}
+
+			prevTouches[ 0 ].copy( touches[ 0 ] );
+			prevTouches[ 1 ].copy( touches[ 1 ] );
+
+		}
+
+		function addPointer( event ) {
+
+			pointers.push( event.pointerId );
+
+		}
+
+		function removePointer( event ) {
+
+			delete pointerPositions[ event.pointerId ];
+
+			for ( var i = 0; i < pointers.length; i ++ ) {
+
+				if ( pointers[ i ] == event.pointerId ) {
+
+					pointers.splice( i, 1 );
+					return;
+
+				}
+
+			}
+
+		}
+
+		function isTrackingPointer( event ) {
+
+			for ( var i = 0; i < pointers.length; i ++ ) {
+
+				if ( pointers[ i ] == event.pointerId ) return true;
+
+			}
+
+			return false;
+
+		}
+
+		function trackPointer( event ) {
+
+			var position = pointerPositions[ event.pointerId ];
+
+			if ( position === undefined ) {
+
+				position = new THREE.Vector2();
+				pointerPositions[ event.pointerId ] = position;
+
+			}
+
+			position.set( event.pageX, event.pageY );
+
+		}
+
+		function getSecondPointerPosition( event ) {
+
+			var pointerId = ( event.pointerId === pointers[ 0 ] ) ? pointers[ 1 ] : pointers[ 0 ];
+
+			return pointerPositions[ pointerId ];
+
+		}
+
+	}
+
+	fromJSON( json ) {
+
+		if ( json.center !== undefined ) this.center.fromArray( json.center );
+
+	}
+
+	toJSON() {
+
+		return {
+			center: this.center.toArray()
+		};
+
+	}
+
+}
+
+export { EditorControls };

package/src/editor/js/GLTFImportDialog.js

@@ -0,0 +1,112 @@
+import { UIRow, UIText, UICheckbox, UIButton } from './libs/ui.js';
+
+class GLTFImportDialog {
+
+	constructor( strings ) {
+
+		this.strings = strings;
+
+		const dom = document.createElement( 'div' );
+		dom.className = 'Dialog';
+		this.dom = dom;
+
+		const background = document.createElement( 'div' );
+		background.className = 'Dialog-background';
+		background.addEventListener( 'click', () => this.cancel() );
+		dom.appendChild( background );
+
+		const content = document.createElement( 'div' );
+		content.className = 'Dialog-content';
+		dom.appendChild( content );
+
+		// Title
+
+		const titleBar = document.createElement( 'div' );
+		titleBar.className = 'Dialog-title';
+		titleBar.textContent = strings.getKey( 'dialog/gltf/title' );
+		content.appendChild( titleBar );
+
+		// Body
+
+		const body = document.createElement( 'div' );
+		body.className = 'Dialog-body';
+		content.appendChild( body );
+
+		// As Scene Checkbox
+
+		const asSceneRow = new UIRow();
+		body.appendChild( asSceneRow.dom );
+
+		this.asSceneCheckbox = new UICheckbox( false );
+		asSceneRow.add( this.asSceneCheckbox );
+
+		asSceneRow.add( new UIText( strings.getKey( 'dialog/gltf/asScene' ) ).setMarginLeft( '6px' ) );
+
+		// Buttons
+
+		const buttonsRow = document.createElement( 'div' );
+		buttonsRow.className = 'Dialog-buttons';
+		body.appendChild( buttonsRow );
+
+		const okButton = new UIButton( strings.getKey( 'dialog/ok' ) );
+		okButton.setWidth( '80px' );
+		okButton.onClick( () => this.confirm() );
+		buttonsRow.appendChild( okButton.dom );
+
+		const cancelButton = new UIButton( strings.getKey( 'dialog/cancel' ) );
+		cancelButton.setWidth( '80px' );
+		cancelButton.setMarginLeft( '8px' );
+		cancelButton.onClick( () => this.cancel() );
+		buttonsRow.appendChild( cancelButton.dom );
+
+		// Promise handlers
+
+		this.resolve = null;
+		this.reject = null;
+
+	}
+
+	show() {
+
+		document.body.appendChild( this.dom );
+
+		return new Promise( ( resolve, reject ) => {
+
+			this.resolve = resolve;
+			this.reject = reject;
+
+		} );
+
+	}
+
+	confirm() {
+
+		const result = {
+			asScene: this.asSceneCheckbox.getValue()
+		};
+
+		this.dom.remove();
+
+		if ( this.resolve ) {
+
+			this.resolve( result );
+
+		}
+
+	}
+
+	cancel() {
+
+		this.dom.remove();
+
+		if ( this.reject ) {
+
+			this.reject( new Error( 'Import cancelled' ) );
+
+		}
+
+	}
+
+}
+
+export { GLTFImportDialog };