diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 955363c..a6fa7ed 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -34,7 +34,7 @@ variables:
       $mountCmd = "net use X: $env:NET_SHARE_X /u:$env:NET_USERQ $SDRIVE_PASSWD"
       Write-Output $mountCmd;
       net use X: $env:NET_SHARE_X /u:$env:NET_USERQ $SDRIVE_PASSWD
-      ROBOCOPY /MIR $env:SRC_PATH\$env:DIR_PATH\ X:\PROVA_SAM\$env:DIR_PATH\
+      ROBOCOPY /MIR $env:SRC_PATH\$env:DIR_PATH\ X:\$env:DIR_PATH\
       SLEEP 2
       net use X: /delete
 
diff --git a/TestArea_IIS01/THREEJS_DOORS/CubeRef/cubeControls.js b/TestArea_IIS01/THREEJS_DOORS/CubeRef/cubeControls.js
new file mode 100644
index 0000000..3233912
--- /dev/null
+++ b/TestArea_IIS01/THREEJS_DOORS/CubeRef/cubeControls.js
@@ -0,0 +1,891 @@
+import * as THREE1 from "../Libs/node_modules/three/build/three.module.js";
+
+const MAINCOLOR = 0xDDDDDD ;
+const ACCENTCOLOR = 0xF7F7F7 ;
+const OUTLINECOLOR = 0xCCCCCC ;
+
+export default class ViewCubeControls extends THREE1.EventDispatcher {
+	constructor( camera, cubeSize, edgeSize, domElement, orbitControls) {
+		super() ;
+		this.cubeSize = cubeSize ;
+		this.edgeSize = edgeSize ;
+		this.domElement = domElement ;
+		this._cube = new ViewCube({
+			size: this.cubeSize,
+			edge: this.edgeSize,
+			outline: true,
+			bgColor: MAINCOLOR,
+			hoverColor: ACCENTCOLOR,
+			outlineColor: OUTLINECOLOR
+		}) ;
+		this._blockRot = false ;
+		this._TopBottom = false ;
+		this._camera = camera ;
+		this._orbitControls = orbitControls ;
+		this._dir = null ;
+		this._lastSelFace = null ;
+		this._currSelFace = null ;
+		this._color = null ;
+		this._name = null ;
+		this._name_click = null ;
+		this._interp = null ;
+		this._animation = null ;
+        this._faceList = [] ;
+        this._red = 0xd9534f ; 
+        this._green = 0x5cb85c ;
+        this._blue = 0x0275d8 ;
+        this._vers = null ;
+        this._rot = null ;
+		this._handleMouseMove = this._handleMouseMove.bind( this) ;
+		this._handleMouseClick = this._handleMouseClick.bind( this) ;
+		this._listen() ;
+	}
+
+	_listen() {
+		this.domElement.addEventListener( 'mousemove', this._handleMouseMove) ;
+		this.domElement.addEventListener( 'click', this._handleMouseClick) ;
+	}
+
+	_handleMouseClick( event) {
+		const x = ( event.offsetX / event.target.clientWidth) * 2 - 1 ;
+		const y = -( event.offsetY / event.target.clientHeight) * 2 + 1 ;
+		this._checkSideTouch( x, y) ;
+	}
+
+	_checkSideTouch( x, y) {
+		const raycaster = new THREE1.Raycaster() ;
+		raycaster.setFromCamera( { x, y }, this._camera) ;
+		const intersects = raycaster.intersectObjects( this._cube.children, true) ;
+		if ( intersects.length) {
+			for ( let { object } of intersects) {
+				if ( object.name) {
+					this._name_click = object.name ;
+					this._rotateTheCube( object.name) ;
+					break ;
+				}
+			}
+		}
+	}
+
+	_rotateTheCube( side) {
+		switch ( side) {
+			case FACES.FRONT:
+				this._setCubeAngles( 0, 0, 0) ;
+				break ;
+			case FACES.RIGHT:
+				this._setCubeAngles( 0, -90, 0) ;
+				break ;
+			case FACES.BACK:
+				this._setCubeAngles( 0, -180, 0) ;
+				break ;
+			case FACES.LEFT:
+				this._setCubeAngles( 0, -270, 0) ;
+				break ;
+			case FACES.TOP:
+				this._setCubeAngles( 90, 0, 0) ;
+				break ;
+			case FACES.BOTTOM:
+				this._setCubeAngles( -90, 0, 0) ;
+				break ;
+			case FACES.TOP_FRONT_EDGE:
+				this._setCubeAngles( 45, 0, 0) ;
+				break ;
+			case FACES.TOP_RIGHT_EDGE:
+				this._setCubeAngles( 45, -90, 0) ;
+				break ;
+			case FACES.TOP_BACK_EDGE:
+				this._setCubeAngles( 45, -180, 0) ;
+				break ;
+			case FACES.TOP_LEFT_EDGE:
+				this._setCubeAngles( 45, -270, 0) ;
+				break ;
+			case FACES.BOTTOM_FRONT_EDGE:
+				this._setCubeAngles( -45, 0, 0) ;
+				break ;
+			case FACES.BOTTOM_RIGHT_EDGE:
+				this._setCubeAngles( -45, -90, 0) ;
+				break ;
+			case FACES.BOTTOM_BACK_EDGE:
+				this._setCubeAngles( -45, -180, 0) ;
+				break ;
+			case FACES.BOTTOM_LEFT_EDGE:
+				this._setCubeAngles( -45, -270, 0) ;
+				break ;
+			case FACES.FRONT_RIGHT_EDGE:
+				this._setCubeAngles( 0, -45, 0) ;
+				break ;
+			case FACES.BACK_RIGHT_EDGE:
+				this._setCubeAngles( 0, -135, 0) ;
+				break ;
+			case FACES.BACK_LEFT_EDGE:
+				this._setCubeAngles( 0, -225, 0) ;
+				break ;
+			case FACES.FRONT_LEFT_EDGE:
+				this._setCubeAngles( 0, -315, 0) ;
+				break ;
+			case FACES.TOP_FRONT_RIGHT_CORNER:
+				this._setCubeAngles( 45, -45, 0) ;
+				break ;
+			case FACES.TOP_BACK_RIGHT_CORNER:
+				this._setCubeAngles(45, -135, 0);
+				break;
+			case FACES.TOP_BACK_LEFT_CORNER:
+				this._setCubeAngles( 45, -225, 0) ;
+				break ;
+			case FACES.TOP_FRONT_LEFT_CORNER:
+				this._setCubeAngles( 45, -315, 0) ;
+				break ;
+			case FACES.BOTTOM_FRONT_RIGHT_CORNER:
+				this._setCubeAngles(-45, -45, 0);
+				break ;
+			case FACES.BOTTOM_BACK_RIGHT_CORNER:
+				this._setCubeAngles( -45, -135, 0) ;
+				break ;
+			case FACES.BOTTOM_BACK_LEFT_CORNER:
+				this._setCubeAngles( -45, -225, 0) ;
+				break ;
+			case FACES.BOTTOM_FRONT_LEFT_CORNER:
+				this._setCubeAngles( -45, -315, 0) ;
+				break ;
+			default:
+				break ;
+		}
+	}
+
+	_setCubeAngles( x, y, z) {
+		const base = this._cube.rotation ;
+		this._blockRot = true ;
+		this._animation = {
+			base: {
+				x: base.x,
+				y: base.y,
+				z: base.z
+			},
+			delta: {
+				x: calculateAngleDelta( base.x, x * toRad, 'x'),
+				y: calculateAngleDelta( base.y, y * toRad, 'y'),
+				z: calculateAngleDelta( base.z, z * toRad, 'z')
+			},
+			duration: 500,
+			time: Date.now()
+		} ;
+	}
+
+	_handleMouseMove( event) {
+		const x = ( event.offsetX / event.target.clientWidth) * 2 - 1 ;
+		const y = -( event.offsetY / event.target.clientHeight) * 2 + 1 ;
+		this._checkSideOver( x, y) ;
+	}
+
+
+	_checkSideOver(x, y) {
+		const raycaster = new THREE1.Raycaster() ;
+		raycaster.setFromCamera( { x, y }, this._camera) ;
+		const intersects = raycaster.intersectObjects( this._cube.children, true) ;
+		
+		// check hover
+		if ( intersects.length) {
+			for ( let { object } of intersects) {
+				if ( object.name) {
+					const prop = CUBE_FACES.find( prop => prop.name === object.name) ;
+					object.parent.children.forEach( function( child) {
+						if ( child.name === object.name) {
+							child.material.color.setHex(ACCENTCOLOR);
+						}
+					});
+					break;
+				}
+			}
+			
+			if ( intersects[0].object.name != null){
+				this._name = intersects[0].object.name ;
+			}
+		}
+		else {
+			this._name = null ;
+		}	
+	}
+	
+	update( orbitControls) {
+		this._animate() ;
+		this._orbitControls = orbitControls ;
+	}
+
+	_animate() {
+		this._orbitControls.object.updateMatrix() ;
+		var invRotMat = new THREE1.Matrix4() ;
+		invRotMat.extractRotation( this._orbitControls.object.matrix) ;
+        invRotMat.invert() ;
+		var euler = new THREE1.Euler() ;
+		euler.setFromRotationMatrix( invRotMat) ;
+		this._cube.rotation.set( euler.x, euler.y, euler.z) ;
+	
+		if( this._animation){ 
+			const now = Date.now() ;
+			const { duration, time } = this._animation;
+			const alpha = Math.min((( now - time) / duration), 1) ;
+			this._interp = alpha ;
+			if ( alpha == 1) {
+				this._animation = null ;
+				this._blockRot = false ;
+				if ( this._name_click == 1  ||  this._name_click == 6){
+					this._TopBottomRotation( this._name_click, this._orbitControls) ;
+				}
+			}
+			this.dispatchEvent({
+				type: 'angle-change',
+				quaternion: this._cube.quaternion.clone(),
+				t: alpha
+			}) ;
+		} 
+		else {
+			this._interp = null ;
+		}	
+	}
+	
+	_TopBottomRotation( type, orbit){
+		const duration = 150 ;
+		const start = performance.now() ;
+		const maxAlpha = 1 ;
+		
+		var theta_i = orbit.object.rotation.z ;
+		var theta_tn = 0 ;
+		var theta_to = 0 ;
+		var theta_t = theta_i ;
+		var theta_tt = theta_i ;
+		var somma = 0 ;
+
+		function loop() {
+			const now = performance.now() ;
+			const delta = now - start ;
+			const alpha = Math.min( delta/duration, maxAlpha);
+			if ( type == 1){ 
+				if ( theta_i >= -Math.PI / 2  &&  theta_i <= Math.PI / 2){
+					theta_tt = theta_t ;
+					if ( theta_i >= 0){
+						theta_t = theta_i - alpha * ( Math.PI / 2 + theta_i) ;
+						var jump = theta_t - theta_tt ;
+						somma += jump ;
+						orbit.rotateLeft( - jump) ;
+					}
+					if( theta_i < 0) {
+						theta_t = theta_i - alpha * ( Math.PI / 2 + theta_i);
+						var jump = theta_t - theta_tt ;
+						orbit.rotateLeft( - jump) ;
+					}
+				}
+				else {
+					theta_tt = theta_t ;
+					if ( theta_i >= 0){
+						theta_t = theta_i + alpha * ( Math.PI/2 + Math.PI - theta_i) ;
+						var jump = theta_t - theta_tt ;
+						orbit.rotateLeft( - jump) ;
+					}
+					if ( theta_i < 0){
+						theta_t = theta_i + alpha * (- theta_i - Math.PI / 2) ;
+						var jump = theta_t - theta_tt ;
+						orbit.rotateLeft( - jump) ;
+					}
+				}
+			}
+			if ( type == 6){ 
+				if( theta_i >= -Math.PI/2  &&  theta_i <= Math.PI / 2){
+					theta_tt = theta_t ;
+					if ( theta_i >= 0){
+						theta_t = theta_i + alpha * ( Math.PI / 2 - theta_i) ;
+						var jump = theta_t - theta_tt ;
+						orbit.rotateLeft( jump) ;
+					}
+					if( theta_i < 0){
+						theta_t = theta_i + alpha * ( Math.PI / 2 - theta_i) ;
+						var jump = theta_t - theta_tt ;
+						orbit.rotateLeft( jump) ;
+					}
+				}
+				else{
+					theta_tt = theta_t ;
+					if ( theta_i >= 0){
+						theta_t = theta_i - alpha * ( theta_i - Math.PI / 2) ;
+						var jump = theta_t - theta_tt ;
+						orbit.rotateLeft(jump);
+					}
+					if (theta_i < 0){
+						theta_t = theta_i + alpha * ( Math.PI + Math.PI / 2 + theta_i);
+						var jump = theta_t - theta_tt ;
+						orbit.rotateLeft( - jump) ;
+					}
+				}
+			}
+			
+			
+			orbit.update() ;
+			if ( alpha !== maxAlpha){
+				return requestAnimationFrame( loop) ;
+			}
+		}
+  
+		loop() ;
+		
+	}
+
+	_animateCubeRotation({ base, delta }, alpha) {
+		const ease = (Math.sin(((alpha * 2) - 1) * Math.PI * 0.5) + 1) * 0.5 ;
+		let angleX = -TWOPI + base.x + delta.x * ease ;
+		let angleY = -TWOPI + base.y + delta.y * ease ;
+		let angleZ = -TWOPI + base.z + delta.z * ease ;
+		this._cube.rotation.set( angleX % TWOPI, angleY % TWOPI, angleZ % TWOPI) ;
+	}
+
+    _colorCube() {
+       // defining standard color ( tone mapping Toy )
+        var blue = this._blue ; 
+        var red = this._red ; 
+        var green = this._green ;
+
+       // main faces
+        this._cube.children[0].children[0].material.color = new THREE1.Color( red) ; 
+        this._cube.children[0].children[1].material.color = new THREE1.Color( green) ;
+        this._cube.children[0].children[2].material.color = new THREE1.Color( red) ; 
+        this._cube.children[0].children[3].material.color = new THREE1.Color( green) ; 
+        this._cube.children[0].children[4].material.color = new THREE1.Color( blue) ; 
+        this._cube.children[0].children[5].material.color = new THREE1.Color( blue) ;
+       
+       // other faces
+        this._cube.children[1].children[0].children[0].material.color = new THREE1.Color( red) ;
+        this._cube.children[1].children[0].children[1].material.color = new THREE1.Color( green) ;
+        this._cube.children[1].children[0].children[2].material.color = new THREE1.Color( blue) ;
+        this._cube.children[1].children[1].children[0].material.color = new THREE1.Color( green) ;
+        this._cube.children[1].children[1].children[1].material.color = new THREE1.Color( red) ; 
+        this._cube.children[1].children[1].children[2].material.color = new THREE1.Color( blue) ;
+        this._cube.children[1].children[2].children[0].material.color = new THREE1.Color( red) ;
+        this._cube.children[1].children[2].children[1].material.color = new THREE1.Color( green);
+        this._cube.children[1].children[2].children[2].material.color = new THREE1.Color( blue) ;
+        this._cube.children[1].children[3].children[0].material.color = new THREE1.Color( green) ;
+        this._cube.children[1].children[3].children[1].material.color = new THREE1.Color( red) ;
+        this._cube.children[1].children[3].children[2].material.color = new THREE1.Color (blue) ;
+        this._cube.children[2].children[0].children[0].material.color = new THREE1.Color( red) ; 
+        this._cube.children[2].children[0].children[1].material.color = new THREE1.Color( green);
+        this._cube.children[2].children[0].children[2].material.color = new THREE1.Color( blue) ; 
+        this._cube.children[2].children[1].children[0].material.color = new THREE1.Color( green);
+        this._cube.children[2].children[1].children[1].material.color = new THREE1.Color( red) ; 
+        this._cube.children[2].children[1].children[2].material.color = new THREE1.Color( blue);
+        this._cube.children[2].children[2].children[0].material.color = new THREE1.Color( red) ; 
+        this._cube.children[2].children[2].children[1].material.color = new THREE1.Color( green) ;
+        this._cube.children[2].children[2].children[2].material.color = new THREE1.Color( blue) ;
+        this._cube.children[2].children[3].children[0].material.color = new THREE1.Color( green) ;
+        this._cube.children[2].children[3].children[1].material.color = new THREE1.Color( red) ;
+        this._cube.children[2].children[3].children[2].material.color = new THREE1.Color( blue);
+        this._cube.children[3].children[0].children[0].material.color = new THREE1.Color( red) ; 
+        this._cube.children[3].children[0].children[1].material.color = new THREE1.Color( blue);
+        this._cube.children[3].children[1].children[0].material.color = new THREE1.Color( green) ;
+        this._cube.children[3].children[1].children[1].material.color = new THREE1.Color( blue);
+        this._cube.children[3].children[2].children[0].material.color = new THREE1.Color( red) ;
+        this._cube.children[3].children[2].children[1].material.color = new THREE1.Color( blue);
+        this._cube.children[3].children[3].children[0].material.color = new THREE1.Color( green) ;
+        this._cube.children[3].children[3].children[1].material.color = new THREE1.Color( blue) ;
+        this._cube.children[4].children[0].children[0].material.color = new THREE1.Color( red) ;
+        this._cube.children[4].children[0].children[1].material.color = new THREE1.Color( blue) ;
+        this._cube.children[4].children[1].children[0].material.color = new THREE1.Color( green) ;
+        this._cube.children[4].children[1].children[1].material.color = new THREE1.Color( blue) ;
+        this._cube.children[4].children[2].children[0].material.color = new THREE1.Color( red) ;
+        this._cube.children[4].children[2].children[1].material.color = new THREE1.Color( blue);
+        this._cube.children[4].children[3].children[0].material.color = new THREE1.Color( green) ;
+        this._cube.children[4].children[3].children[1].material.color = new THREE1.Color( blue) ;
+        this._cube.children[5].children[0].children[0].material.color = new THREE1.Color( red) ;
+        this._cube.children[5].children[0].children[1].material.color = new THREE1.Color( green) ;
+        this._cube.children[5].children[1].children[0].material.color = new THREE1.Color( green) ;
+        this._cube.children[5].children[1].children[1].material.color = new THREE1.Color( red) ;
+        this._cube.children[5].children[2].children[0].material.color = new THREE1.Color( red) ; 
+        this._cube.children[5].children[2].children[1].material.color = new THREE1.Color( green) ;
+        this._cube.children[5].children[3].children[0].material.color = new THREE1.Color( green) ;
+        this._cube.children[5].children[3].children[1].material.color = new THREE1.Color( red) ;
+
+       // setting second Color for raytracaing effect
+        this._cube.children[0].children[0].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[0].children[1].material.oldColor = new THREE1.Color( green);
+        this._cube.children[0].children[2].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[0].children[3].material.oldColor = new THREE1.Color( green);
+        this._cube.children[0].children[4].material.oldColor = new THREE1.Color( blue) ; 
+        this._cube.children[0].children[5].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[1].children[0].children[0].material.oldColor = new THREE1.Color( red) ;
+        this._cube.children[1].children[0].children[1].material.oldColor = new THREE1.Color( green) ;
+        this._cube.children[1].children[0].children[2].material.oldColor = new THREE1.Color( blue) ; 
+        this._cube.children[1].children[1].children[0].material.oldColor = new THREE1.Color( green) ;
+        this._cube.children[1].children[1].children[1].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[1].children[1].children[2].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[1].children[2].children[0].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[1].children[2].children[1].material.oldColor = new THREE1.Color( green);
+        this._cube.children[1].children[2].children[2].material.oldColor = new THREE1.Color( blue); 
+        this._cube.children[1].children[3].children[0].material.oldColor = new THREE1.Color( green) ;
+        this._cube.children[1].children[3].children[1].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[1].children[3].children[2].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[2].children[0].children[0].material.oldColor = new THREE1.Color( red) ;
+        this._cube.children[2].children[0].children[1].material.oldColor = new THREE1.Color( green) ;
+        this._cube.children[2].children[0].children[2].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[2].children[1].children[0].material.oldColor = new THREE1.Color( green);
+        this._cube.children[2].children[1].children[1].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[2].children[1].children[2].material.oldColor = new THREE1.Color( blue);
+        this._cube.children[2].children[2].children[0].material.oldColor = new THREE1.Color( red); 
+        this._cube.children[2].children[2].children[1].material.oldColor = new THREE1.Color( green);
+        this._cube.children[2].children[2].children[2].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[2].children[3].children[0].material.oldColor = new THREE1.Color( green);
+        this._cube.children[2].children[3].children[1].material.oldColor = new THREE1.Color( red) ;
+        this._cube.children[2].children[3].children[2].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[3].children[0].children[0].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[3].children[0].children[1].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[3].children[1].children[0].material.oldColor = new THREE1.Color( green) ; 
+        this._cube.children[3].children[1].children[1].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[3].children[2].children[0].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[3].children[2].children[1].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[3].children[3].children[0].material.oldColor = new THREE1.Color( green) ; 
+        this._cube.children[3].children[3].children[1].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[4].children[0].children[0].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[4].children[0].children[1].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[4].children[1].children[0].material.oldColor = new THREE1.Color( green) ; 
+        this._cube.children[4].children[1].children[1].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[4].children[2].children[0].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[4].children[2].children[1].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[4].children[3].children[0].material.oldColor = new THREE1.Color( green) ; 
+        this._cube.children[4].children[3].children[1].material.oldColor = new THREE1.Color( blue) ;
+        this._cube.children[5].children[0].children[0].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[5].children[0].children[1].material.oldColor = new THREE1.Color(green) ;
+        this._cube.children[5].children[1].children[0].material.oldColor = new THREE1.Color( green) ; 
+        this._cube.children[5].children[1].children[1].material.oldColor = new THREE1.Color( red) ;
+        this._cube.children[5].children[2].children[0].material.oldColor = new THREE1.Color( red) ; 
+        this._cube.children[5].children[2].children[1].material.oldColor = new THREE1.Color( green) ;
+        this._cube.children[5].children[3].children[0].material.oldColor = new THREE1.Color( green) ; 
+        this._cube.children[5].children[3].children[1].material.oldColor = new THREE1.Color( red) ;
+        
+       // adding faces to list
+        this._face_list = [] ;
+        this._face_list.push( this._cube.children[0].children[0]) ; 
+        this._face_list.push( this._cube.children[0].children[1]) ;
+        this._face_list.push( this._cube.children[0].children[2]) ; 
+        this._face_list.push( this._cube.children[0].children[3]) ;
+        this._face_list.push( this._cube.children[0].children[4]) ; 
+        this._face_list.push( this._cube.children[0].children[5]) ;
+        this._face_list.push( this._cube.children[1].children[0].children[0]) ; 
+        this._face_list.push( this._cube.children[1].children[0].children[1]) ;
+        this._face_list.push( this._cube.children[1].children[0].children[2]) ; 
+        this._face_list.push( this._cube.children[1].children[1].children[0]) ;
+        this._face_list.push( this._cube.children[1].children[1].children[1]) ; 
+        this._face_list.push( this._cube.children[1].children[1].children[2]) ;
+        this._face_list.push( this._cube.children[1].children[2].children[0]) ; 
+        this._face_list.push( this._cube.children[1].children[2].children[1]) ;
+        this._face_list.push( this._cube.children[1].children[2].children[2]) ; 
+        this._face_list.push( this._cube.children[1].children[3].children[0]) ;
+        this._face_list.push( this._cube.children[1].children[3].children[1]) ; 
+        this._face_list.push( this._cube.children[1].children[3].children[2]) ;
+        this._face_list.push( this._cube.children[2].children[0].children[0]) ; 
+        this._face_list.push( this._cube.children[2].children[0].children[1]) ;
+        this._face_list.push( this._cube.children[2].children[0].children[2]) ; 
+        this._face_list.push( this._cube.children[2].children[1].children[0]) ;
+        this._face_list.push( this._cube.children[2].children[1].children[1]) ; 
+        this._face_list.push( this._cube.children[2].children[1].children[2]) ;
+        this._face_list.push( this._cube.children[2].children[2].children[0]) ; 
+        this._face_list.push( this._cube.children[2].children[2].children[1]) ;
+        this._face_list.push( this._cube.children[2].children[2].children[2]) ; 
+        this._face_list.push( this._cube.children[2].children[3].children[0]) ;
+        this._face_list.push( this._cube.children[2].children[3].children[1]) ; 
+        this._face_list.push( this._cube.children[2].children[3].children[2]) ;
+        this._face_list.push( this._cube.children[3].children[0].children[0]) ; 
+        this._face_list.push( this._cube.children[3].children[0].children[1]) ;
+        this._face_list.push( this._cube.children[3].children[1].children[0]) ; 
+        this._face_list.push( this._cube.children[3].children[1].children[1]) ;
+        this._face_list.push( this._cube.children[3].children[2].children[0]) ; 
+        this._face_list.push( this._cube.children[3].children[2].children[1]) ;
+        this._face_list.push( this._cube.children[3].children[3].children[0]) ; 
+        this._face_list.push( this._cube.children[3].children[3].children[1]) ;
+        this._face_list.push( this._cube.children[4].children[0].children[0]) ; 
+        this._face_list.push( this._cube.children[4].children[0].children[1]) ;
+        this._face_list.push( this._cube.children[4].children[1].children[0]) ; 
+        this._face_list.push( this._cube.children[4].children[1].children[1]) ;
+        this._face_list.push( this._cube.children[4].children[2].children[0]) ; 
+        this._face_list.push( this._cube.children[4].children[2].children[1]) ;
+        this._face_list.push( this._cube.children[4].children[3].children[0]) ; 
+        this._face_list.push( this._cube.children[4].children[3].children[1]) ;
+        this._face_list.push( this._cube.children[5].children[0].children[0]) ; 
+        this._face_list.push( this._cube.children[5].children[0].children[1]) ;
+        this._face_list.push( this._cube.children[5].children[1].children[0]) ; 
+        this._face_list.push( this._cube.children[5].children[1].children[1]) ;
+        this._face_list.push( this._cube.children[5].children[2].children[0]) ; 
+        this._face_list.push( this._cube.children[5].children[2].children[1]) ;
+        this._face_list.push( this._cube.children[5].children[3].children[0]) ; 
+        this._face_list.push( this._cube.children[5].children[3].children[1]) ;
+    }
+
+    _getVersorAndRotation() {
+        switch ( this._name) {
+        case 2: //FRONT
+            this._vers = new THREE1.Vector3( 0, 0, 1) ; 
+            this._rot = new THREE1.Vector3( 0 * toRad, 0 * toRad, 0 * toRad) ; 
+            break ;
+        case 4: //BACK
+            this._vers = new THREE1.Vector3( 0, 0, -1) ; 
+            this._rot = new THREE1.Vector3( 0 * toRad, 180 * toRad, 0 * toRad) ; 
+            break ;
+        case 3: //RIGHT
+            this._vers = new THREE1.Vector3( 1, 0, 0) ; 
+            this._rot = new THREE1.Vector3( 0 * toRad, -90 * toRad, 0 * toRad) ; 
+            break ;
+        case 5: //LEFT
+            this._vers = new THREE1.Vector3( -1, 0, 0) ;
+            this._rot = new THREE1.Vector3( 0 * toRad, -270 * toRad, 0 * toRad) ;
+            break ;
+        case 1: //TOP
+            this._vers = new THREE1.Vector3( 0, 1, 0) ;
+            this._rot = new THREE1.Vector3( 90 * toRad, 0 * toRad, 0 * toRad) ; 
+            break ;
+        case 6: //BOTTOM
+            this._vers = new THREE1.Vector3( 0, -1, 0) ;
+            this._rot = new THREE1.Vector3( -90 * toRad, 0 * toRad, 0 * toRad) ; 
+            break ;
+        case 11: //FRONT-RIGHT
+            this._vers = new THREE1.Vector3( 1 / Math.sqrt( 2), 0, 1 / Math.sqrt( 2)) ;
+            this._rot = new THREE1.Vector3( 0 * toRad, -45 * toRad, 0 * toRad) ; 
+            break ;
+        case 7: //FRONT-TOP
+            this._vers = new THREE1.Vector3( 0, 1 / Math.sqrt( 2), 1 / Math.sqrt( 2)) ;
+            this._rot = new THREE1.Vector3(45 * toRad, 0 * toRad, 0 * toRad) ;
+            break ;
+        case 14: //FRONT-LEFT
+            this._vers = new THREE1.Vector3( -1 / Math.sqrt( 2), 0, 1 / Math.sqrt( 2)) ;
+            this._rot = new THREE1.Vector3( 0 * toRad, -315 * toRad, 0 * toRad) ;
+            break ;
+        case 15: //FRONT-BOTTOM
+            this._vers = new THREE1.Vector3( 0, -1 / Math.sqrt( 2), 1 / Math.sqrt( 2)) ;
+            this._rot = new THREE1.Vector3(-45 * toRad, 0 * toRad, 0 * toRad) ;
+            break ;
+        case 12: //BACK-RIGHT
+            this._vers = new THREE1.Vector3( 1 / Math.sqrt( 2), 0, -1 / Math.sqrt( 2)) ;
+            this._rot = new THREE1.Vector3( 0 * toRad, -135 * toRad, 0 * toRad) ;
+            break ;
+        case 9: //BACK-TOP
+            this._vers = new THREE1.Vector3( 0, 1 / Math.sqrt( 2), -1 / Math.sqrt( 2)) ;
+            this._rot = new THREE1.Vector3( 45 * toRad, -180 * toRad, 0 * toRad) ; 
+            break ;
+        case 13: //BACK-LEFT
+            this._vers = new THREE1.Vector3( -1 / Math.sqrt(2), 0, -1 / Math.sqrt(2)) ;
+            this._rot = new THREE1.Vector3(0 * toRad, -225 * toRad, 0 * toRad) ; 
+            break ;
+        case 17: //BACK-BOTTOM
+            this._vers = new THREE1.Vector3( 0, -1 / Math.sqrt( 2), -1 / Math.sqrt( 2)) ;
+            this._rot = new THREE1.Vector3( -45 * toRad, -180 * toRad, 0 * toRad) ; 
+            break ;
+        case 8: //RIGHT-TOP
+            this._vers = new THREE1.Vector3( 1 / Math.sqrt( 2), 1 / Math.sqrt( 2), 0) ;
+            this._rot = new THREE1.Vector3( 45 * toRad, -90 * toRad, 0 * toRad) ; 
+            break ;
+        case 16: //RIGHT-BOTTOM
+            this._vers = new THREE1.Vector3( 1 / Math.sqrt(2), -1 / Math.sqrt(2), 0) ;
+            this._rot = new THREE1.Vector3( -45 * toRad, -90 * toRad, 0 * toRad) ; 
+            break ;
+        case 10: //LEFT-TOP
+            this._vers = new THREE1.Vector3( -1 / Math.sqrt(2), 1 / Math.sqrt(2), 0) ;
+            this._rot = new THREE1.Vector3( 45 * toRad, -270 * toRad, 0 * toRad) ; 
+            break ;
+        case 18: //LEFT-BOTTOM
+            this._vers = new THREE1.Vector3( -1 / Math.sqrt(2), -1 / Math.sqrt(2), 0) ; 
+            this._rot = new THREE1.Vector3(-45 * toRad, 270 * toRad, 0 * toRad) ; 
+            break ;
+        case 21: //TOP-LEFT-BACK
+            this._vers = new THREE1.Vector3( -1 / Math.sqrt( 3), 1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
+            this._rot = new THREE1.Vector3( 45 * toRad, -225 * toRad, 0 * toRad) ; 
+            break ;
+        case 20: //TOP-BACK-RIGHT
+            this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), 1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
+            this._rot = new THREE1.Vector3( 45 * toRad, -135 * toRad, 0 * toRad) ;
+            break ;
+        case 19: //TOP-RIGHT-FRONT
+            this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), 1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
+            this._rot = new THREE1.Vector3( 45 * toRad, -45 * toRad, 0 * toRad) ;
+            break ;
+        case 22: //TOP-FRONT-LEFT
+            this._vers = new THREE1.Vector3( -1 / Math.sqrt( 3), 1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
+            this._rot = new THREE1.Vector3( 45 * toRad, -315 * toRad, 0 * toRad) ;
+            break ;
+        case 26: //BOTTOM-LEFT-FRONT
+            this._vers = new THREE1.Vector3( -1 / Math.sqrt( 3), -1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
+            this._rot = new THREE1.Vector3(-45 * toRad, -315 * toRad, 0 * toRad);
+            break ;
+        case 23: //BOTTOM-FRONT-RIGHT
+            this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), -1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ; 
+            this._rot = new THREE1.Vector3(-45 * toRad, -45 * toRad, 0 * toRad);
+            break ;
+        case 25: //BOTTOM-LEFT-BACK
+            this._vers = new THREE1.Vector3( -1 / Math.sqrt( 3), -1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
+            this._rot = new THREE1.Vector3(-45 * toRad, -225 * toRad, 0 * toRad);
+            break ;
+        case 24: //BOTTOM-BACK-RIGHT
+            this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), -1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
+            this._rot = new THREE1.Vector3(-45 * toRad, -135 * toRad, 0 * toRad) ;
+            break ;
+        }
+    }
+
+	setQuaternion( quaternion) {
+		this._cube.setRotationFromQuaternion( quaternion) ;
+	}
+
+	getObject() {
+		return this._cube ;
+	}
+}
+
+class ViewCube extends THREE1.Object3D {
+	constructor({
+		size = 60,
+		edge = 5,
+		outline = true,
+		bgColor = 0xCCCCCC,
+		hoverColor = 0xFFFFFF,
+		outlineColor = 0x999999
+	}) {
+		super() ;
+		this._cubeSize = size ;
+		this._edgeSize = edge ;
+		this._outline = outline ;
+		this._bgColor = bgColor ;
+		this._hoverColor = hoverColor ;
+		this._outlineColor = outlineColor ;
+		this._build() ;
+	}
+	_build() {
+		const faceSize = this._cubeSize - this._edgeSize * 2 ;
+		const faceOffset = this._cubeSize / 2 ;
+		const borderSize = this._edgeSize ;
+
+		/* faces: front, right, back, left, top, bottom */
+		const cubeFaces = this._createCubeFaces( faceSize, faceOffset);
+		
+		for ( let [i, props] of BOX_FACES.entries()) {
+			cubeFaces.children[i].name = props.name ;
+			cubeFaces.children[i].material.color.setHex( this._bgColor) ;
+			cubeFaces.children[i].material.map = props.map ;
+		}
+		this.add( cubeFaces) ;
+
+		/* corners: top, bottom */
+		const corners = [] ;
+		for ( let [i, props] of CORNER_FACES.entries()) {
+			const corner = this._createCornerFaces( borderSize, faceOffset, props.name, { color: this._bgColor}) ;
+			corner.rotateOnAxis( new THREE1.Vector3( 0, 1, 0), ( i % 4) * 90 * toRad) ;
+			corners.push( corner) ;
+		}
+		const topCorners = new THREE1.Group() ;
+		const bottomCorners = new THREE1.Group() ;
+		this.add( topCorners.add( ...corners.slice(0, 4))) ;
+		this.add( bottomCorners.add( ...corners.slice(4)).rotateOnAxis( new THREE1.Vector3( 1, 0, 0), 180 * toRad)) ;
+
+		/* edges: top + bottom */
+		const edges = [] ;
+		for ( let [i, props] of EDGE_FACES.entries()) {
+			const edge = this._createHorzEdgeFaces( faceSize, borderSize, faceOffset, props.name, { color: this._bgColor}) ;
+			edge.rotateOnAxis( new THREE1.Vector3(0, 1, 0), (i % 4) * 90 * toRad) ;
+			edges.push( edge) ;
+		}
+		const topEdges = new THREE1.Group() ;
+		const bottomEdges = new THREE1.Group() ;
+		this.add( topEdges.add( ...edges.slice(0, 4))) ;
+		this.add( bottomEdges.add( ...edges.slice(4)).rotateOnAxis( new THREE1.Vector3(1, 0, 0), 180 * toRad)) ;
+
+		/* edges on the side */
+		const sideEdges = new THREE1.Group() ;
+		for ( let [i, props] of EDGE_FACES_SIDE.entries()) {
+			const edge = this._createVertEdgeFaces( borderSize, faceSize, faceOffset, props.name, { color: this._bgColor}) ;
+			edge.rotateOnAxis( new THREE1.Vector3( 0, 1, 0), i * 90 * toRad) ;
+			sideEdges.add( edge) ;
+		}
+		this.add( sideEdges) ;
+
+		if ( this._outline) {
+			this.add( this._createCubeOutline( this._cubeSize)) ;
+		}
+	}
+	_createFace( size, position, { axis = [0, 1, 0], angle = 0, name = "", matProps = {} } = {}) {
+		if ( ! Array.isArray( size)) size = [size, size] ;
+		const material = new THREE1.MeshBasicMaterial( matProps) ;
+		const geometry = new THREE1.PlaneGeometry( size[0], size[1]) ;
+		const face = new THREE1.Mesh( geometry, material) ;
+		face.name = name ;
+		face.rotateOnAxis( new THREE1.Vector3( ...axis), angle * toRad) ;
+		face.position.set( ...position);
+		return face ;
+	}
+	_createCubeFaces( faceSize, offset) {
+		const faces = new THREE1.Object3D() ;
+		faces.add( this._createFace( faceSize, [0, 0, offset], { axis: [0, 1, 0], angle: 0 })); 
+		faces.add( this._createFace( faceSize, [offset, 0, 0], { axis: [0, 1, 0], angle: 90 }));
+		faces.add( this._createFace( faceSize, [0, 0, -offset], { axis: [0, 1, 0], angle: 180 }));
+		faces.add( this._createFace( faceSize, [-offset, 0, 0], { axis: [0, 1, 0], angle: 270 }));
+		faces.add(( this._createFace( faceSize, [0, offset, 0], { axis: [1, 0, 0], angle: -90 })).rotateOnAxis( new THREE1.Vector3(0,0,1), -Math.PI / 2)) ;
+		faces.add( this._createFace( faceSize, [0, -offset, 0], { axis: [1, 0, 0], angle: 90 }).rotateOnAxis( new THREE1.Vector3(0,0,1), Math.PI / 2)) ;
+		return faces;
+	}
+	_createCornerFaces( faceSize, offset, name = "", matProps = {}) {
+		const corner = new THREE1.Object3D() ;
+		const borderOffset = offset - faceSize / 2 ;
+		corner.add(this._createFace( faceSize, [borderOffset, borderOffset, offset], { axis: [0, 1, 0], angle: 0, matProps, name })) ;
+		corner.add( this._createFace( faceSize, [offset, borderOffset, borderOffset], { axis: [0, 1, 0], angle: 90, matProps, name })) ;
+		corner.add( this._createFace( faceSize, [borderOffset, offset, borderOffset], { axis: [1, 0, 0], angle: -90, matProps, name })) ;
+		return corner ;
+	}
+	_createHorzEdgeFaces( w, h, offset, name = "", matProps = {}) {
+		const edge = new THREE1.Object3D() ;
+		const borderOffset = offset - h / 2 ;
+		edge.add( this._createFace( [w, h], [0, borderOffset, offset], { axis: [0, 1, 0], angle: 0, name, matProps })) ;
+		edge.add( this._createFace( [w, h], [0, offset, borderOffset], { axis: [1, 0, 0], angle: -90, name, matProps })) ;
+		return edge ;
+	}
+	_createVertEdgeFaces( w, h, offset, name = "", matProps = {}) {
+		const edge = new THREE1.Object3D() ;
+		const borderOffset = offset - w / 2 ;
+		edge.add( this._createFace([w, h], [borderOffset, 0, offset], { axis: [0, 1, 0], angle: 0, name, matProps })) ;
+		edge.add( this._createFace([w, h], [offset, 0, borderOffset], { axis: [0, 1, 0], angle: 90, name, matProps })) ;
+		return edge;
+	}
+	_createCubeOutline( size) {
+		const geometry = new THREE1.BoxGeometry( size, size, size) ;
+		const geo = new THREE1.EdgesGeometry( geometry);
+		const mat = new THREE1.LineBasicMaterial({ color: this._outlineColor, linewidth: 1 }) ;
+		const wireframe = new THREE1.LineSegments( geo, mat) ;
+		return wireframe ;
+	}
+}
+
+var toRad = Math.PI / 180 ;
+var TWOPI = 2 * Math.PI ;
+
+function calculateAngleDelta( from, to, axis) {
+	
+	const direct = to - from ;
+	const altA = direct - TWOPI ;
+	const altB = direct + TWOPI ;
+
+	if ( Math.abs( direct) > Math.abs( altA)) {
+		return altA ;
+	}
+	else if ( Math.abs( direct) > Math.abs( altB)) {
+		return altB ;
+	}
+	
+	// direzione sempre compresa tra [-PI, +PI]
+	return direct ;
+}
+
+function createTextSprite( text, props) {
+	const fontface = props.font || 'Helvetica' ;
+	const fontsize = props.fontSize || 30 ;
+	const width = props.width || 200 ;
+	const height = props.height || 200 ;
+	const bgColor = props.color ? props.bgColor.join(', ') : "255, 255, 255, 1.0" ;
+	const fgColor = props.color ? props.color.join(', ') : "0, 0, 0, 1.0" ;
+	const canvas = document.createElement( 'canvas') ;
+	canvas.width = width ;
+	canvas.height = height ;
+	const context = canvas.getContext( '2d');
+	context.font = `bold ${fontsize}px ${fontface}` ;
+	context.fillStyle = `rgba(${bgColor})` ;
+	context.fillRect( 0, 0, width, height) ;
+	// get size data (height depends only on font size)
+	const metrics = context.measureText( text);
+	const textWidth = metrics.width ;
+	// text color
+	context.fillStyle = `rgba(${fgColor})`;
+	context.fillText( text, width / 2 - textWidth / 2, height / 2 + fontsize / 2 - 2) ;
+	// canvas contents will be used for a texture
+	const texture = new THREE1.Texture( canvas)
+	texture.minFilter = THREE1.LinearFilter ;
+	texture.needsUpdate = true ;
+	return texture ;
+}
+
+var FACES = {
+	TOP: 1,
+	FRONT: 2,
+	RIGHT: 3,
+	BACK: 4,
+	LEFT: 5,
+	BOTTOM: 6,
+
+	TOP_FRONT_EDGE: 7,
+	TOP_RIGHT_EDGE: 8,
+	TOP_BACK_EDGE: 9,
+	TOP_LEFT_EDGE: 10,
+
+	FRONT_RIGHT_EDGE: 11,
+	BACK_RIGHT_EDGE: 12,
+	BACK_LEFT_EDGE: 13,
+	FRONT_LEFT_EDGE: 14,
+
+	BOTTOM_FRONT_EDGE: 15,
+	BOTTOM_RIGHT_EDGE: 16,
+	BOTTOM_BACK_EDGE: 17,
+	BOTTOM_LEFT_EDGE: 18,
+
+	TOP_FRONT_RIGHT_CORNER: 19,
+	TOP_BACK_RIGHT_CORNER: 20,
+	TOP_BACK_LEFT_CORNER: 21,
+	TOP_FRONT_LEFT_CORNER: 22,
+
+	BOTTOM_FRONT_RIGHT_CORNER: 23,
+	BOTTOM_BACK_RIGHT_CORNER: 24,
+	BOTTOM_BACK_LEFT_CORNER: 25,
+	BOTTOM_FRONT_LEFT_CORNER: 26
+};
+
+var BOX_FACES = [
+	{
+		name: FACES.FRONT,
+		map: createTextSprite( "RIGHT", { fontSize: 60, font: "Arial Narrow, sans-serif" })
+	},
+	{
+		name: FACES.RIGHT,
+		map: createTextSprite( "FRONT", { fontSize: 60, font: "Arial Narrow, sans-serif" })
+	},
+	{
+		name: FACES.BACK,
+		map: createTextSprite( "LEFT", { fontSize: 60, font: "Arial Narrow, sans-serif" })
+	},
+	{
+		name: FACES.LEFT,
+		map: createTextSprite( "BACK", { fontSize: 60, font: "Arial Narrow, sans-serif" })
+	},
+	{
+		name: FACES.TOP,
+		map: createTextSprite( "TOP", { fontSize: 60, font: "Arial Narrow, sans-serif" })
+	},
+	{
+		name: FACES.BOTTOM,
+		map: createTextSprite( "BOTTOM", { fontSize: 40, font: "Arial Narrow, sans-serif" })
+	}
+];
+var CORNER_FACES = [
+	{ name: FACES.TOP_FRONT_RIGHT_CORNER },
+	{ name: FACES.TOP_BACK_RIGHT_CORNER },
+	{ name: FACES.TOP_BACK_LEFT_CORNER },
+	{ name: FACES.TOP_FRONT_LEFT_CORNER },
+	{ name: FACES.BOTTOM_BACK_RIGHT_CORNER },
+	{ name: FACES.BOTTOM_FRONT_RIGHT_CORNER },
+	{ name: FACES.BOTTOM_FRONT_LEFT_CORNER },
+	{ name: FACES.BOTTOM_BACK_LEFT_CORNER }
+];
+var EDGE_FACES = [
+	{ name: FACES.TOP_FRONT_EDGE },
+	{ name: FACES.TOP_RIGHT_EDGE },
+	{ name: FACES.TOP_BACK_EDGE },
+	{ name: FACES.TOP_LEFT_EDGE },
+	// flip back and front bottom edges
+	{ name: FACES.BOTTOM_BACK_EDGE },
+	{ name: FACES.BOTTOM_RIGHT_EDGE },
+	{ name: FACES.BOTTOM_FRONT_EDGE },
+	{ name: FACES.BOTTOM_LEFT_EDGE },
+];
+var EDGE_FACES_SIDE = [
+	{ name: FACES.FRONT_RIGHT_EDGE },
+	{ name: FACES.BACK_RIGHT_EDGE },
+	{ name: FACES.BACK_LEFT_EDGE },
+	{ name: FACES.FRONT_LEFT_EDGE }
+];
+// merge them all to ease the traversing
+var CUBE_FACES = [...BOX_FACES, ...CORNER_FACES, ...EDGE_FACES, ...EDGE_FACES_SIDE] ;
\ No newline at end of file
diff --git a/TestArea_IIS01/THREEJS_DOORS/Images/Logo.png b/TestArea_IIS01/THREEJS_DOORS/Images/Logo.png
new file mode 100644
index 0000000..6962a14
Binary files /dev/null and b/TestArea_IIS01/THREEJS_DOORS/Images/Logo.png differ
diff --git a/TestArea_IIS01/THREEJS_DOORS/Images/Thumbs.db b/TestArea_IIS01/THREEJS_DOORS/Images/Thumbs.db
new file mode 100644
index 0000000..02bca49
Binary files /dev/null and b/TestArea_IIS01/THREEJS_DOORS/Images/Thumbs.db differ
diff --git a/TestArea_IIS01/THREEJS_DOORS/index.html b/TestArea_IIS01/THREEJS_DOORS/index.html
index c7e3efa..40d85ae 100644
--- a/TestArea_IIS01/THREEJS_DOORS/index.html
+++ b/TestArea_IIS01/THREEJS_DOORS/index.html
@@ -17,26 +17,39 @@
        <!-- definition of Menu -->
         <div id = 'divMenu'>
            <!-- 3 elements: Logo, button "?" and Information -->
-            <div id = 'divLogo'></div>
-            <button id = 'helpButton'>?</button>
-            <div id = 'infoDiv'></div>
+            <div class = 'container'>
+                <img id = 'imgLogo' src = 'Images/logo.png'>
+            </div>
+            <div class = 'container'>
+                <button id = 'helpButton'>?</button>
+            </div>
+            <div class = 'container'>
+                <div id = 'infoDiv'>
+                    <pre>
+ Camera settings : 
+ Zoom : Wheel-Scroll 
+ Pan : Mouse-Left and Drag ( hold ) 
+ Rotate : Mouse-Right and Drag ( hold ) 
+ Type : Key-O ( orthographic ) 
+        Key-P ( perspective ) 
+                        
+ Toggle Auto-rotation : Key-R 
+                        
+ Toggle Show-Dimension : Key-D
+                    </pre>   
+                </div>
+            </div>
         </div>
 
         <div id = 'DoorRender'></div>
-        <!--<div id = 'Info'>
-            Camera settings : <br>
-            &emsp; Zoom : Wheel-Scroll <br>
-            &emsp; Pan : Mouse-Left and Drag ( hold ) <br>
-            &emsp; Rotate : Mouse-Right and Drag ( hold ) <br>
-            &emsp; Type : Key-O ( orthographic ) | Key-P ( perspective ) <br><br>
-            Toggle Auto-rotation : Key-R <br><br> 
-            Toggle Show-Dimension : Key-D
-        </div> -->
+        <div id = 'RefRender'></div>
+
         <script type = 'module'>
            // importing
             import * as THREE from './Libs/node_modules/three/build/three.module.js' ;
             import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
             import { Rhino3dmLoader} from 'three/addons/loaders/3DMLoader.js' ;
+            import ViewCubeControls from './CubeRef/cubeControls.js';
             
            // settings
             const EPS_SMALL = 0.001 ;
@@ -49,8 +62,13 @@
             var SHOW_DIMENSION = true ;
             var GRID_MAIN_COLOR = new THREE.Color( 0x000000) ;
             var GRID_SECOND_COLOR = new THREE.Color( 0xcccccc) ;
-            var PATH = './Door_models' ;
-            var FILE_NAME = 'Door1.3dm' ;
+            var PATH = 'https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models' ;
+            var FILE_NAME = getUrlParameter('src') ;
+
+           // referement global variables ---------
+            var scene_ref ; var renderer_ref ; var camera_ref ; var group_ref ;
+            var cube_ref ; var anim1 = 0 ; var ComeFromRot ; var index_LSS = [] ; var face_list = [] ;
+           /* -----------------------------------*/
             
 
            // shared variables
@@ -90,6 +108,42 @@
                 requestAnimationFrame( animate) ;
                 renderer.render( scene, controls.object) ;
                 controls.update() ;
+                if ( cube_ref._blockRot == false) {
+                    if ( ComeFromRot) {
+                        ComeFromRot = false ;
+                        anim1 = 0 ;
+                    }
+                    else {
+                        //controls.autoRotate = controls.motion ;
+                        controls.update() ;
+                    }
+                }
+                else {
+                    ComeFromRot = true ;
+                }
+                if ( cube_ref._name != null  &&  cube_ref._name != '') { 
+                    index_LSS = [] ;
+                    for ( var i = 0 ; i < face_list.length ; i++) {
+                        if ( face_list[i].name == cube_ref._name) {
+                            index_LSS.push( i) ;
+                            face_list[i].material.color = new THREE.Color( 0xFFFFFF) ;
+                        }
+                    }
+                    for ( var i = 0 ; i < face_list.length ; i++) {
+                        for ( var j = 0 ; j < index_LSS.length ; j++) {
+                            if ( face_list[i].name != face_list[index_LSS[j]].name) {
+                                face_list[i].material.color = face_list[i].material.oldColor ;
+                            }
+                        }
+                    }
+                }
+                else { // no intersezione
+                    for ( var j = 0 ; j < index_LSS.length ; j++) {
+                        face_list[index_LSS[j]].material.color = face_list[index_LSS[j]].material.oldColor ;
+                    }
+                }
+                cube_ref.update( controls) ;
+                renderer_ref.render( scene_ref, camera_ref) ;
             }
 
             function readDoor() {
@@ -108,6 +162,8 @@
                     setGrid() ;
                    // setting frame
                     setFrame() ;
+                   // static frame
+                    setStaticFrame() ;
                   // render loop
                     animate() ;
                 }) ;
@@ -128,7 +184,7 @@
                 else if ( object.type == 'Line') {
                     object.material.depthTest = false ;     // disable deep test ( no z-fighting with meshes)
                     object.material.transparent = true ;    // setting transparency for visibility inside/outside meshes
-                    object.material.opacity = 1 ;        // high-level of opacity
+                    object.material.opacity = 1 ;           // high-level of opacity
                     object.renderOrder = 1 ;                // ordering them on Z-buffer after meshes
                 }
             }
@@ -235,10 +291,55 @@
                 scene.add( frameGroup) ;
             }
 
+            function setStaticFrame() {
+               // container of the cube
+                const divContainer = document.getElementById( 'RefRender') ;
+               // renderer
+                renderer_ref = new THREE.WebGLRenderer({ antialias: true, alpha : true, transparent : true}) ;
+                renderer_ref.setSize( divContainer.clientWidth, divContainer.clientHeight) ;
+                renderer_ref.setPixelRatio( 2 * window.devicePixelRatio) ;
+                divContainer.appendChild( renderer_ref.domElement) ;
+               // scene
+                scene_ref = new THREE.Scene() ;
+                if ( CAMERA_TYPE == CAMERA_ORTHO)
+                    camera_ref = new THREE.OrthographicCamera( - divContainer.clientWidth / 5, divContainer.clientWidth / 5, 
+                                                               divContainer.clientHeight / 5, -divContainer.clientHeight / 5, 0.1, 1000) ;
+                else
+                    camera_ref = new THREE.PerspectiveCamera( 50, 1, 0.1, 1000) ;
+
+                camera_ref.position.set( 0, 0, 70) ;
+                camera_ref.lookAt( 0, 0, 0) ;
+                cube_ref = new ViewCubeControls( camera_ref, 30, 5, renderer_ref.domElement, controls) ;
+                scene_ref.add( cube_ref.getObject()) ;
+                var Cposition = null ;
+                var Ctarget = null ;
+                var distanceC = 0 ;
+                cube_ref.addEventListener( 'angle-change', ({ quaternion, t}) => {
+                    getVersor( cube_ref._name_click) ;
+                    if ( cube_ref._blockRot) { 
+                        if ( anim1 == 0)
+                            distanceC = camera.position.distanceTo( new THREE.Vector3( controls.target.x, controls.target.y, controls.target.z)) ;
+                    }
+                    anim1 ++ ;
+                    var VectorEnd = new THREE.Vector3( controls.target.x + Cvers.x * distanceC,
+                                                       controls.target.y + Cvers.y * distanceC,
+                                                       controls.target.z + Cvers.z * distanceC) ;
+                    camera.position.lerp( VectorEnd, t) ;
+                    controls.update() ;
+                }) ;
+                ComeFromRot = false ;
+                var Cvers = null ;
+                var Crot = null ;
+                const toRad = Math.PI / 180 ;
+                cube_ref._colorCube() ;
+            }
+
             function ToggleRotation() {
                 controls.autoRotate = ( ! controls.autoRotate) ;
             }
 
+           // Event Listner -------------------------------------------------------------------
+                                    // KEY
             document.addEventListener( "keypress", function( event) {
                 if ( event.key === "r")
                     ToggleRotation() ;
@@ -260,6 +361,136 @@
                     window.alert( 'manca :(') ;
             });
 
+                                    // Elements
+            var helpButton = document.getElementById( "helpButton") ;
+            var infoDiv = document.getElementById( "infoDiv") ;
+            infoDiv.style.display = "none";
+            helpButton.addEventListener( "click", function() {
+                if ( infoDiv.style.display === "none")
+                    infoDiv.style.display = "block" ;
+                else 
+                infoDiv.style.display = "none";
+            }) ;
+
+           // Reading URL parameters -------------------------------------------------------------------------
+            function getUrlParameter( name) {
+               // get query string from URL
+                const queryString = window.location.search ;
+               // create URLSearchParams object from query string
+                const urlParams = new URLSearchParams( queryString) ;
+               // get parameter value by name
+                return urlParams.get( name) ;
+            }
+
+           // static cube -----------------------------------------------------------------------------------------
+            function getVersor( name) {
+                switch ( name) {
+                case 2: //FRONT
+                    Cvers = new THREE.Vector3(0, 0, 1); 
+                    Crot = new THREE.Vector3( 0 * toRad, 0 * toRad, 0 * toRad); 
+                    break ;
+                case 4: //BACK
+                    Cvers = new THREE.Vector3( 0, 0, -1) ; 
+                    Crot = new THREE.Vector3( 0 * toRad, 180 * toRad, 0 * toRad); 
+                    break ;
+                case 3: //RIGHT
+                    Cvers = new THREE.Vector3( 1, 0, 0) ; 
+                    Crot = new THREE.Vector3( 0 * toRad, -90 * toRad, 0 * toRad) ; 
+                    break ;
+                case 5: //LEFT
+                    Cvers = new THREE.Vector3(-1, 0, 0) ;
+                    Crot = new THREE.Vector3( 0 * toRad, -270 * toRad, 0 * toRad) ;
+                    break ;
+                case 1: //TOP
+                    Cvers = new THREE.Vector3( 0, 1, 0) ;
+                    Crot = new THREE.Vector3( 90 * toRad, 0 * toRad, 0 * toRad) ; 
+                    break ;
+                case 6: //BOTTOM
+                    Cvers = new THREE.Vector3 (0, -1, 0) ;
+                    Crot = new THREE.Vector3( -90 * toRad, 0 * toRad, 0 * toRad) ; 
+                    break ;
+                case 11: //FRONT-RIGHT
+                    Cvers = new THREE.Vector3( 1 / Math.sqrt( 2), 0, 1 / Math.sqrt( 2)) ;
+                    Crot = new THREE.Vector3( 0 * toRad, -45 * toRad, 0 * toRad) ; 
+                    break ;
+                case 7: //FRONT-TOP
+                    Cvers = new THREE.Vector3( 0, 1 / Math.sqrt( 2), 1 / Math.sqrt( 2)) ;
+                    Crot = new THREE.Vector3(45 * toRad, 0 * toRad, 0 * toRad) ;
+                    break ;
+                case 14: //FRONT-LEFT
+                    Cvers = new THREE.Vector3( -1 / Math.sqrt( 2), 0, 1 / Math.sqrt( 2)) ;
+                    Crot = new THREE.Vector3( 0 * toRad, -315 * toRad, 0 * toRad) ;
+                    break ;
+                case 15: //FRONT-BOTTOM
+                    Cvers = new THREE.Vector3( 0, -1 / Math.sqrt( 2), 1 / Math.sqrt( 2)) ;
+                    Crot = new THREE.Vector3(-45 * toRad, 0 * toRad, 0 * toRad) ;
+                    break ;
+                case 12: //BACK-RIGHT
+                    Cvers = new THREE.Vector3( 1 / Math.sqrt( 2), 0, -1 / Math.sqrt( 2)) ;
+                    Crot = new THREE.Vector3( 0 * toRad, -135 * toRad, 0 * toRad) ;
+                    break ;
+                case 9: //BACK-TOP
+                    Cvers = new THREE.Vector3( 0, 1 / Math.sqrt( 2), -1 / Math.sqrt( 2)) ;
+                    Crot = new THREE.Vector3( 45 * toRad, -180 * toRad, 0 * toRad) ; 
+                    break ;
+                case 13: //BACK-LEFT
+                    Cvers = new THREE.Vector3( -1 / Math.sqrt(2), 0, -1 / Math.sqrt(2)) ;
+                    Crot = new THREE.Vector3(0 * toRad, -225 * toRad, 0 * toRad) ; 
+                    break ;
+                case 17: //BACK-BOTTOM
+                    Cvers = new THREE.Vector3( 0, -1 / Math.sqrt( 2), -1 / Math.sqrt( 2)) ;
+                    Crot = new THREE.Vector3( -45 * toRad, -180 * toRad, 0 * toRad) ; 
+                    break ;
+                case 8: //RIGHT-TOP
+                    Cvers = new THREE.Vector3( 1 / Math.sqrt( 2), 1 / Math.sqrt( 2), 0) ;
+                    Crot = new THREE.Vector3( 45 * toRad, -90 * toRad, 0 * toRad) ; 
+                    break ;
+                case 16: //RIGHT-BOTTOM
+                    Cvers = new THREE.Vector3( 1 / Math.sqrt(2), -1 / Math.sqrt(2), 0) ;
+                    Crot = new THREE.Vector3( -45 * toRad, -90 * toRad, 0 * toRad) ; 
+                    break ;
+                case 10: //LEFT-TOP
+                    Cvers = new THREE.Vector3( -1 / Math.sqrt(2), 1 / Math.sqrt(2), 0) ;
+                    Crot = new THREE.Vector3( 45 * toRad, -270 * toRad, 0 * toRad) ; 
+                    break ;
+                case 18: //LEFT-BOTTOM
+                    Cvers = new THREE.Vector3( -1 / Math.sqrt(2), -1 / Math.sqrt(2), 0) ; 
+                    Crot = new THREE.Vector3(-45 * toRad, 270 * toRad, 0 * toRad) ; 
+                    break ;
+                case 21: //TOP-LEFT-BACK
+                    Cvers = new THREE.Vector3( -1 / Math.sqrt( 3), 1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
+                    Crot = new THREE.Vector3( 45 * toRad, -225 * toRad, 0 * toRad) ; 
+                    break ;
+                case 20: //TOP-BACK-RIGHT
+                    Cvers = new THREE.Vector3( 1 / Math.sqrt( 3), 1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
+                    Crot = new THREE.Vector3( 45 * toRad, -135 * toRad, 0 * toRad) ;
+                    break ;
+                case 19: //TOP-RIGHT-FRONT
+                    Cvers = new THREE.Vector3( 1 / Math.sqrt( 3), 1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
+                    Crot = new THREE.Vector3( 45 * toRad, -45 * toRad, 0 * toRad) ;
+                    break ;
+                case 22: //TOP-FRONT-LEFT
+                    Cvers = new THREE.Vector3( -1 / Math.sqrt( 3), 1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
+                    Crot = new THREE.Vector3( 45 * toRad, -315 * toRad, 0 * toRad) ;
+                    break ;
+                case 26: //BOTTOM-LEFT-FRONT
+                    Cvers = new THREE.Vector3( -1 / Math.sqrt( 3), -1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
+                    Crot = new THREE.Vector3(-45 * toRad, -315 * toRad, 0 * toRad);
+                    break ;
+                case 23: //BOTTOM-FRONT-RIGHT
+                    Cvers = new THREE.Vector3( 1 / Math.sqrt( 3), -1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ; 
+                    Crot = new THREE.Vector3(-45 * toRad, -45 * toRad, 0 * toRad);
+                    break ;
+                case 25: //BOTTOM-LEFT-BACK
+                    Cvers = new THREE.Vector3( -1 / Math.sqrt( 3), -1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
+                    Crot = new THREE.Vector3(-45 * toRad, -225 * toRad, 0 * toRad);
+                    break ;
+                case 24: //BOTTOM-BACK-RIGHT
+                    Cvers = new THREE.Vector3( 1 / Math.sqrt( 3), -1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
+                    Crot = new THREE.Vector3(-45 * toRad, -135 * toRad, 0 * toRad) ;
+                    break ;
+                }
+            }
         </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/TestArea_IIS01/THREEJS_DOORS/style.css b/TestArea_IIS01/THREEJS_DOORS/style.css
index 6229b49..7b70eb1 100644
--- a/TestArea_IIS01/THREEJS_DOORS/style.css
+++ b/TestArea_IIS01/THREEJS_DOORS/style.css
@@ -12,17 +12,51 @@ canvas {
     height: 100% ;
 }
 
-#Info{
-    position: fixed ; 
-    top: 10 ;
-    left: 10 ;
-    /*border : 1px solid white ;*/
-    width: 100% ;
-    height: 100px ;
-    color : white ;
-    font-size: 1.25em ;
+#divMenu {
+    position: fixed ;
+    top: 10px ;
+    right: 10px ;
+    background-color: transparent ;
+    width: 250px ;
 }
 
-#helpButton{
-    text-decoration: underline ;
+.container {
+    width: 100% ;
+    height: auto ;
+    margin-bottom: 10px ;
+}
+
+.container::after {
+    content: "" ;
+    display: table ;
+    clear: both ;
+}
+
+.container img {
+    width: 100% ;
+    height: auto ;
+    display: block ;
+}
+
+#helpButton {
+    text-decoration: underline ;
+    float: right ;
+    height: auto ;
+}
+
+#infoDiv {
+    width: 100% ; 
+    height: auto ;
+    color: white ;
+    background-color: transparent ;
+    font-size: 0.9em ;
+}
+
+#RefRender {
+    position: fixed ;
+    width: 200px ;
+    height: 200px ;
+    bottom: 10px ;
+    right: 10px ;
+    border: 1px solid black ;
 }