Refactor: Extract three.js scene assets from tsp model

Author: syt123450

src/event/Handler3D.js

@@ -0,0 +1,39 @@
+/**
+ * @author syt123450 / https://github.com/syt123450
+ */
+
+function Handler3D( tspModel ) {
+
+	this.tspModel = tspModel;
+	
+	/**
+	 * Record layer hovered by mouse now.
+	 *
+	 * @type { Layer }
+	 */
+	
+	this.hoveredLayer = undefined;
+	
+	/**
+	 * Record Emissive element.
+	 *
+	 * @type { THREE.Object }
+	 */
+	
+	this.hoveredEmissive = undefined;
+	
+}
+
+Handler3D.prototype = {
+
+	handleClick: function() {
+	
+	},
+	
+	handleHover: function( intersects ) {
+		
+	}
+	
+};
+
+export { Handler3D };

src/event/HandlerFactory.js

@@ -0,0 +1,32 @@
+/**
+ * @author syt123450 / https://github.com/syt123450
+ */
+
+import { SequentialHandler3D } from './SequentialHandler3D';
+import { ModelHandler3D } from './ModelHandler3D';
+
+let HandlerFactory = ( function() {
+	
+	function getEventHandler( tspModel ) {
+		
+		if ( tspModel.modelType === "Sequential" ) {
+			
+			return new SequentialHandler3D( tspModel );
+			
+		} else if ( tspModel.modelType === "Model" ) {
+			
+			return new ModelHandler3D( tspModel );
+			
+		}
+		
+	}
+	
+	return {
+		
+		getEventHandler: getEventHandler
+		
+	}
+	
+} )();
+
+export { HandlerFactory };

src/event/ModelHandler3D.js

@@ -0,0 +1,83 @@
+/**
+ * @author syt123450 / https://github.com/syt123450
+ */
+
+import { Handler3D } from './Handler3D';
+
+function ModelHandler3D( tspModel ) {
+
+	Handler3D.call( this, tspModel );
+	
+}
+
+ModelHandler3D.prototype = Object.assign( Object.create( Handler3D.prototype ), {
+	
+	handleClick: function( selectedElement ) {
+		
+		// Let the layer to handle actual click event.
+		
+		let selectedLayer = this.tspModel.layers[ selectedElement.layerIndex ];
+		
+		selectedLayer.handleClick( selectedElement );
+		
+		// Rearrange layer
+		
+		let translateTime = selectedLayer.openTime;
+		let level = this.tspModel.layerLookupMap[ selectedElement.layerIndex ];
+		
+		this.tspModel.rearrangeLayerInLevel( level, translateTime );
+		
+	},
+	
+	handleHover: function( intersects ) {
+		
+		if ( this.hoveredLayer !== undefined ) {
+			
+			this.hoveredLayer.handleHoverOut();
+			this.hoveredLayer = undefined;
+			
+		}
+		
+		if ( this.hoveredEmissive !== undefined ) {
+			
+			this.hoveredEmissive.context.darken();
+			this.hoveredEmissive = undefined;
+			
+		}
+		
+		for ( let i = 0; i < intersects.length; i ++ ) {
+			
+			if ( intersects !== null && intersects.length > 0 && intersects[ i ].object.type === "Mesh" ) {
+				
+				let selectedElement = intersects[ i ].object;
+				
+				if ( selectedElement.hoverable === true ) {
+					
+					if ( selectedElement.emissiveable ) {
+						
+						this.hoveredEmissive = selectedElement;
+						selectedElement.context.emissive();
+						
+					}
+					
+					let selectedLayer = this.tspModel.layers[ selectedElement.layerIndex ];
+					
+					// Let the layer to handle actual hover event.
+					
+					selectedLayer.handleHoverIn( selectedElement );
+					
+					this.hoveredLayer = selectedLayer;
+					
+					break;
+					
+				}
+				
+			}
+			
+		}
+		
+	}
+	
+} );
+
+export { ModelHandler3D };

src/event/SequentialHandler3D.js

@@ -0,0 +1,76 @@
+/**
+ * @author syt123450 / https://github.com/syt123450
+ */
+
+import { Handler3D } from './Handler3D';
+
+function SequentialHandler3D( tspModel ) {
+	
+	Handler3D.call( this, tspModel );
+	
+}
+
+SequentialHandler3D.prototype = Object.assign( Object.create( Handler3D.prototype ), {
+	
+	handleClick: function( selectedElement ) {
+		
+		// Let the layer to handle actual click event.
+		
+		let selectedLayer = this.tspModel.layers[ selectedElement.layerIndex - 1 ];
+		
+		selectedLayer.handleClick( selectedElement );
+		
+	},
+	
+	handleHover: function( intersects ) {
+		
+		if ( this.hoveredLayer !== undefined ) {
+			
+			this.hoveredLayer.handleHoverOut();
+			this.hoveredLayer = undefined;
+			
+		}
+		
+		if ( this.hoveredEmissive !== undefined ) {
+			
+			this.hoveredEmissive.context.darken();
+			this.hoveredEmissive = undefined;
+			
+		}
+		
+		for ( let i = 0; i < intersects.length; i ++ ) {
+			
+			if ( intersects !== null && intersects.length > 0 && intersects[ i ].object.type === "Mesh" ) {
+				
+				let selectedElement = intersects[ i ].object;
+				
+				if ( selectedElement.hoverable === true ) {
+					
+					if ( selectedElement.emissiveable ) {
+						
+						this.hoveredEmissive = selectedElement;
+						selectedElement.context.emissive();
+						
+					}
+					
+					let selectedLayer = this.tspModel.layers[ selectedElement.layerIndex - 1 ];
+					
+					// Let the layer to handle actual hover event.
+					
+					selectedLayer.handleHoverIn( selectedElement );
+					
+					this.hoveredLayer = selectedLayer;
+					
+					break;
+					
+				}
+				
+			}
+			
+		}
+		
+	}
+	
+} );
+
+export { SequentialHandler3D };

src/renderer/ModelRenderer.js

@@ -0,0 +1,24 @@
+/**
+ * @author syt123450 / https://github.com/syt123450
+ */
+
+function ModelRenderer( tspModel, handlers ) {
+	
+	this.tspModel = tspModel;
+	this.handlers = handlers;
+	
+}
+
+ModelRenderer.prototype = {
+	
+	init: function() {
+	
+	},
+	
+	reset: function() {
+	
+	}
+	
+};
+
+export { ModelRenderer };

src/renderer/RendererFactory.js

@@ -0,0 +1,26 @@
+/**
+ * @author syt123450 / https://github.com/syt123450
+ */
+
+import { HandlerFactory } from '../event/HandlerFactory';
+import { Web3DRenderer } from './Web3DRenderer';
+
+let RendererFactory = ( function() {
+	
+	function getRenderer( tspModel ) {
+		
+		let eventHandler = HandlerFactory.getEventHandler( tspModel );
+		
+		return new Web3DRenderer( tspModel, eventHandler );
+		
+	}
+	
+	return {
+		
+		getRenderer: getRenderer
+		
+	}
+	
+} )();
+
+export { RendererFactory };