diff --git a/TestArea_IIS01/THREEJS_DOORS/CubeRef/cubeControls.js b/TestArea_IIS01/THREEJS_DOORS/StaticRef/cubeControls.js
similarity index 87%
rename from TestArea_IIS01/THREEJS_DOORS/CubeRef/cubeControls.js
rename to TestArea_IIS01/THREEJS_DOORS/StaticRef/cubeControls.js
index 3233912..880406c 100644
--- a/TestArea_IIS01/THREEJS_DOORS/CubeRef/cubeControls.js
+++ b/TestArea_IIS01/THREEJS_DOORS/StaticRef/cubeControls.js
@@ -60,6 +60,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
 			for ( let { object } of intersects) {
 				if ( object.name) {
 					this._name_click = object.name ;
+					this._name = object.name ;
 					this._rotateTheCube( object.name) ;
 					break ;
 				}
@@ -177,34 +178,53 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
 		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
+	   // 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);
+							child.material.color.setHex( ACCENTCOLOR) ;
 						}
-					});
-					break;
+					}) ;
+					this.decolorCube( object.name) ;		
+					break ;
 				}
 			}
-			
-			if ( intersects[0].object.name != null){
+			if ( intersects[0].object.name != null) {
 				this._name = intersects[0].object.name ;
 			}
 		}
-		else {
+		else if ( ! this.name) {
 			this._name = null ;
+			this.decolorCube( null) ;
 		}	
 	}
+
+	decolorCube( name) {
+	   // main faces
+		for ( let i = 0 ; i < this._cube.children[0].children.length ; ++ i) {
+			if ( this._cube.children[0].children[i].name != name)
+				this._cube.children[0].children[i].material.color.set( this._cube.children[0].children[i].material.oldColor) ;
+		}
+	   // edges and corners
+		for ( let i = 1 ; i < this._cube.children.length ; ++ i) {
+			const child = this._cube.children[i] ;
+			for ( let j = 0 ; j < child.children.length ; ++ j) {
+				const granChild = child.children[j] ;
+				for ( let k = 0 ; k < granChild.children.length ; ++ k) {
+					const myMesh = granChild.children[k] ;
+					if ( myMesh.name !== name)
+						myMesh.material.color.set( myMesh.material.oldColor) ; 
+				}
+			}
+		}
+	}
 	
 	update( orbitControls) {
 		this._animate() ;
@@ -216,27 +236,23 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
 		var invRotMat = new THREE1.Matrix4() ;
 		invRotMat.extractRotation( this._orbitControls.object.matrix) ;
         invRotMat.invert() ;
+		const RotY_mat = new THREE1.Matrix4() ;
+		RotY_mat.makeRotationY( Math.PI / 2) ;
+		invRotMat.multiply( RotY_mat) ;
 		var euler = new THREE1.Euler() ;
 		euler.setFromRotationMatrix( invRotMat) ;
-		this._cube.rotation.set( euler.x, euler.y, euler.z) ;
+		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) ;
-				}
+		if ( this._animation) { 
+		   // for top and bottom faces
+			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
 			}) ;
+			this._animation = null ;
 		} 
 		else {
 			this._interp = null ;
@@ -268,7 +284,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
 						somma += jump ;
 						orbit.rotateLeft( - jump) ;
 					}
-					if( theta_i < 0) {
+					if ( theta_i < 0) {
 						theta_t = theta_i - alpha * ( Math.PI / 2 + theta_i);
 						var jump = theta_t - theta_tt ;
 						orbit.rotateLeft( - jump) ;
@@ -329,7 +345,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
 	}
 
 	_animateCubeRotation({ base, delta }, alpha) {
-		const ease = (Math.sin(((alpha * 2) - 1) * Math.PI * 0.5) + 1) * 0.5 ;
+		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 ;
@@ -514,111 +530,113 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
         this._face_list.push( this._cube.children[5].children[3].children[1]) ;
     }
 
-    _getVersorAndRotation() {
+    _setVersorAndRotation() {
         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
+        case 2: // RIGHT
             this._vers = new THREE1.Vector3( 1, 0, 0) ; 
-            this._rot = new THREE1.Vector3( 0 * toRad, -90 * toRad, 0 * toRad) ; 
+            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) ;
+        case 4: // LEFT
+			this._vers = new THREE1.Vector3( -1, 0, 0) ; 
+			this._rot = new THREE1.Vector3( 0 * toRad, -90 * toRad, 0 * toRad) ; 
             break ;
-        case 1: //TOP
+        case 3: // FRONT
+            this._vers = new THREE1.Vector3( 0, 0, -1) ; 
+            this._rot = new THREE1.Vector3( 0 * toRad, 0 * toRad, 180 * toRad) ; 
+            break ;
+        case 5: // BACK
+			this._vers = new THREE1.Vector3( 0, 0, 1) ; 
+			this._rot = new THREE1.Vector3( 0 * toRad, 0 * 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
+        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
+
+        case 11: // RIGHT-FRONT
+            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: // 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 14: // BACK-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) ;
+        case 15: // BOTTOM-RIGHT
+            this._vers = new THREE1.Vector3( 1 / Math.sqrt( 2), -1 / Math.sqrt( 2), 0.) ;
+            this._rot = new THREE1.Vector3( 135 * toRad, - 135 * 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) ;
+        case 12: // FRONT-LEFT 
+            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) ;
+        case 9: // LEFT-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) ; 
+        case 13: // LEFT-BACK 
+            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 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) ; 
+        case 17: // BOTTOM-LEFT
+            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 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) ; 
+        case 8: // FRONT-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 21: //TOP-LEFT-BACK
+        case 16: // BOTTOM-FRONT
+            this._vers = new THREE1.Vector3( 0., -1 / Math.sqrt( 2), -1 / Math.sqrt(2)) ;
+            this._rot = new THREE1.Vector3( 135 * toRad, 0 * toRad, 0 * toRad) ; 
+            break ;
+        case 10: // TOP-BACK
+            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 18: // BOTTOM-BACK
+            this._vers = new THREE1.Vector3( 0., -1 / Math.sqrt(2), 1 / Math.sqrt(2), 0) ; 
+            this._rot = new THREE1.Vector3( 135 * toRad, 180 * toRad, 0 * toRad) ; 
+            break ;
+
+        case 21: // LEFT-BACK-TOP
+            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 20: // FRONT-LEFT-TOP
             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
+        case 19: // RIGHT-FRONT-TOP 
+            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 22: // BACK-RIGHT-TOP
             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) ;
+            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) ;
+        case 26: // 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( 135 * toRad, 45 * toRad, 0 * toRad);
             break ;
-        case 26: //BOTTOM-LEFT-FRONT
+        case 23: // BOTTOM-RIGHT-FRONT
+            this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), -1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ; 
+            this._rot = new THREE1.Vector3( 135 * toRad, 135 * 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, -315 * toRad, 0 * toRad);
+            this._rot = new THREE1.Vector3( 135 * toRad, -45 * 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
+        case 24: // BOTTOM-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, -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) ;
+            this._rot = new THREE1.Vector3( 135 * toRad, - 135 * toRad, 0 * toRad) ;
             break ;
         }
     }
@@ -762,14 +780,12 @@ function calculateAngleDelta( from, to, axis) {
 	const altA = direct - TWOPI ;
 	const altB = direct + TWOPI ;
 
-	if ( Math.abs( direct) > Math.abs( altA)) {
+	if ( Math.abs( direct) > Math.abs( altA))
 		return altA ;
-	}
-	else if ( Math.abs( direct) > Math.abs( altB)) {
+	else if ( Math.abs( direct) > Math.abs( altB))
 		return altB ;
-	}
 	
-	// direzione sempre compresa tra [-PI, +PI]
+	// direction always between [-PI, +PI]
 	return direct ;
 }
 
@@ -783,12 +799,12 @@ function createTextSprite( text, props) {
 	const canvas = document.createElement( 'canvas') ;
 	canvas.width = width ;
 	canvas.height = height ;
-	const context = canvas.getContext( '2d');
+	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 metrics = context.measureText( text) ;
 	const textWidth = metrics.width ;
 	// text color
 	context.fillStyle = `rgba(${fgColor})`;
@@ -859,7 +875,7 @@ var BOX_FACES = [
 		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 },
@@ -869,7 +885,7 @@ var CORNER_FACES = [
 	{ 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 },
@@ -880,12 +896,12 @@ var EDGE_FACES = [
 	{ 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/StaticRef/refControls.js b/TestArea_IIS01/THREEJS_DOORS/StaticRef/refControls.js
new file mode 100644
index 0000000..6835260
--- /dev/null
+++ b/TestArea_IIS01/THREEJS_DOORS/StaticRef/refControls.js
@@ -0,0 +1,58 @@
+import * as THREE1 from "../Libs/node_modules/three/build/three.module.js";
+
+export function getStaticRef( thick, length) {
+   // color definition
+    const RED = 0xd9534f ; 
+    const GREEN = 0x5cb85c ;
+    const BLUE = 0x0275d8 ;
+    const BLACK = 0x000000 ;
+   // cylinder geometry
+    const axis_geometry = new THREE1.CylinderGeometry( thick, thick, length, 32) ; 
+    const arrow_geometry = new THREE1.CylinderGeometry( 0., 2 * thick, length / 5, 32) ; 
+   // materials
+    const x_material = new THREE1.MeshBasicMaterial({ color: RED}) ;
+    const y_material = new THREE1.MeshBasicMaterial({ color: GREEN}) ;
+    const z_material = new THREE1.MeshBasicMaterial({ color: BLUE}) ;
+   // line-meshes
+    const x_cylinder = new THREE1.Mesh( axis_geometry, x_material) ; 
+    const y_cylinder = new THREE1.Mesh( axis_geometry, y_material) ;
+    const z_cylinder = new THREE1.Mesh( axis_geometry, z_material) ;
+   // arrow-meshes
+    const x_cylinder_arrow = new THREE1.Mesh( arrow_geometry, x_material ) ;
+    const y_cylinder_arrow = new THREE1.Mesh( arrow_geometry, y_material ) ;
+    const z_cylinder_arrow = new THREE1.Mesh( arrow_geometry, z_material ) ;
+   // rotation for axis and arrows
+    x_cylinder.rotateOnAxis( new THREE1.Vector3( 0., 0., 1.), - Math.PI / 2) ;
+    y_cylinder.rotateOnAxis( new THREE1.Vector3( 1., 0., 0.), Math.PI / 2) ;
+    x_cylinder_arrow.rotateOnAxis( new THREE1.Vector3( 0., 0., 1.), - Math.PI / 2) ;
+    y_cylinder_arrow.rotateOnAxis( new THREE1.Vector3( 1., 0., 0.), Math.PI / 2) ;
+   // translations
+    x_cylinder.translateY( length / 2) ;
+    y_cylinder.translateY( length / 2) ;
+    z_cylinder.translateY( length / 2) ;
+    x_cylinder_arrow.translateY( 1.1 * length) ;
+    y_cylinder_arrow.translateY( 1.1 * length) ;
+    z_cylinder_arrow.translateY( 1.1 * length) ; 
+   // origin
+    const sphere_geometry = new THREE1.SphereGeometry( 1.5 * thick, 32, 32) ; 
+    const sphere_material = new THREE1.MeshBasicMaterial( { color: BLACK}) ; 
+    const sphere_origin = new THREE1.Mesh( sphere_geometry, sphere_material ) ; 
+   // creating the group
+    const axisGroup = new THREE1.Group() ;
+    axisGroup.add( x_cylinder) ;
+    axisGroup.add( y_cylinder) ;
+    axisGroup.add( z_cylinder) ;
+    axisGroup.add( x_cylinder_arrow) ;
+    axisGroup.add( y_cylinder_arrow) ;
+    axisGroup.add( z_cylinder_arrow) ;
+    axisGroup.add( sphere_origin) ;
+    return axisGroup ;
+}
+
+export function updateRef( ref, controls) {
+    var invRotMat = new THREE1.Matrix4() ;
+    invRotMat.extractRotation( controls.object.matrix) ;
+    invRotMat.invert() ;
+    var euler = new THREE1.Euler().setFromRotationMatrix( invRotMat) ;
+    ref.rotation.set( euler.x, euler.y , euler.z) ;
+}
\ No newline at end of file
diff --git a/TestArea_IIS01/THREEJS_DOORS/index.html b/TestArea_IIS01/THREEJS_DOORS/index.html
index 40d85ae..1aec83c 100644
--- a/TestArea_IIS01/THREEJS_DOORS/index.html
+++ b/TestArea_IIS01/THREEJS_DOORS/index.html
@@ -29,7 +29,8 @@
  Camera settings : 
  Zoom : Wheel-Scroll 
  Pan : Mouse-Left and Drag ( hold ) 
- Rotate : Mouse-Right and Drag ( hold ) 
+ Rotate : Mouse-Right and Drag ( hold )
+ Center : Key-C 
  Type : Key-O ( orthographic ) 
         Key-P ( perspective ) 
                         
@@ -43,13 +44,15 @@
 
         <div id = 'DoorRender'></div>
         <div id = 'RefRender'></div>
+        <div id = 'Ref1Render'></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';
+            import ViewCubeControls from './StaticRef/cubeControls.js';
+            import { getStaticRef, updateRef } from './StaticRef/refControls.js' ;
             
            // settings
             const EPS_SMALL = 0.001 ;
@@ -66,8 +69,8 @@
             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 = [] ;
+            var scene_ref ; var renderer_ref ; var camera_ref ; var group_ref ; var cube_ref ;
+            var scene_ref1 ; var renderer_ref1 ; var camera_ref1 ; var group_ref1 ; var frame_ref1 ;
            /* -----------------------------------*/
             
 
@@ -108,48 +111,18 @@
                 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) ;
+                renderer_ref1.render( scene_ref1, camera_ref1) ;
+                updateRef( frame_ref1, controls) ;
             }
 
             function readDoor() {
                 const loader = new Rhino3dmLoader() ;
                 loader.setLibraryPath( './Libs/node_modules/three/examples/jsm/libs/rhino3dm/' ) ;
                 loader.load( PATH + "/" + FILE_NAME, function( object) {
+                   // passing into threejs frame
+                    //object.rotateX( - Math.PI / 2) ;
                    // removing shading from colors and adjusting z-fighting with lines
                     for ( let i = 0 ; i < object.children.length ; ++ i)
                         setOpenGLRenderProperties( object.children[i]) ;
@@ -162,6 +135,8 @@
                     setGrid() ;
                    // setting frame
                     setFrame() ;
+                   // static cube
+                    setStaticCube() ;
                    // static frame
                     setStaticFrame() ;
                   // render loop
@@ -291,7 +266,7 @@
                 scene.add( frameGroup) ;
             }
 
-            function setStaticFrame() {
+            function setStaticCube() {
                // container of the cube
                 const divContainer = document.getElementById( 'RefRender') ;
                // renderer
@@ -306,34 +281,50 @@
                                                                divContainer.clientHeight / 5, -divContainer.clientHeight / 5, 0.1, 1000) ;
                 else
                     camera_ref = new THREE.PerspectiveCamera( 50, 1, 0.1, 1000) ;
-
+               // setting standard camera posizion and lookAt -> made according cube dimension
                 camera_ref.position.set( 0, 0, 70) ;
                 camera_ref.lookAt( 0, 0, 0) ;
+               // creatin the cube object and adding it to the scene
                 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) ;
+                const myCube = cube_ref.getObject() ;
+                scene_ref.add( myCube) ;
+               // event listener for angle change
+                cube_ref.addEventListener( 'angle-change', ({ quaternion}) => {
+                   // blocking t-parameter
+                    cube_ref._setVersorAndRotation() ; // setting normal versor of the face
+                    const distanceC = controls.object.position.distanceTo( new THREE.Vector3( controls.target.x, controls.target.y, controls.target.z)) ;
+                    var vtEnd = new THREE.Vector3( controls.target.x + cube_ref._vers.x * distanceC,
+                                                   controls.target.y + cube_ref._vers.y * distanceC,
+                                                   controls.target.z + cube_ref._vers.z * distanceC) ;
+                    controls.object.position.set( vtEnd.x, vtEnd.y, vtEnd.z) ;
                     controls.update() ;
                 }) ;
-                ComeFromRot = false ;
-                var Cvers = null ;
-                var Crot = null ;
-                const toRad = Math.PI / 180 ;
                 cube_ref._colorCube() ;
             }
 
+            function setStaticFrame() {
+               // container of the cube
+               const divContainer = document.getElementById( 'Ref1Render') ;
+               // renderer
+                renderer_ref1 = new THREE.WebGLRenderer({ antialias: true, alpha : true, transparent : true}) ;
+                renderer_ref1.setSize( divContainer.clientWidth, divContainer.clientHeight) ;
+                renderer_ref1.setPixelRatio( 2 * window.devicePixelRatio) ;
+                divContainer.appendChild( renderer_ref1.domElement) ;
+               // scene
+                scene_ref1 = new THREE.Scene() ;
+                if ( CAMERA_TYPE == CAMERA_ORTHO)
+                    camera_ref1 = new THREE.OrthographicCamera( - divContainer.clientWidth / 5, divContainer.clientWidth / 5, 
+                                                                divContainer.clientHeight / 5, - divContainer.clientHeight / 5, 0.1, 1000) ;
+                else
+                    camera_ref1 = new THREE.PerspectiveCamera( 50, 1, 0.1, 1000) ;
+               // setting standard camera posizion and lookAt -> made according cube dimension
+                camera_ref1.position.set( 0, 0, 70) ;
+                camera_ref1.lookAt( 0, 0, 0) ;
+               // creatin the cube object and adding it to the scene
+                frame_ref1 = getStaticRef( 1, 25) ;
+                scene_ref1.add( frame_ref1) ;   
+            }
+
             function ToggleRotation() {
                 controls.autoRotate = ( ! controls.autoRotate) ;
             }
@@ -343,22 +334,25 @@
             document.addEventListener( "keypress", function( event) {
                 if ( event.key === "r")
                     ToggleRotation() ;
-                else if ( event.key === 'p') {
+                else if ( event.key === 'p'  ||  event.key === 'P') {
                     if ( CAMERA_TYPE == CAMERA_PERSP)
                         return ;
                     controls.object = perspCamera.clone() ;
                     CAMERA_TYPE = CAMERA_PERSP ;
                     setCameraPosition() ;
                 }
-                else if ( event.key === 'o') {
+                else if ( event.key === 'o'  ||  event.key === 'O') {
                     if ( CAMERA_TYPE == CAMERA_ORTHO)
                         return ;
                     controls.object = ortoCamera.clone() ;
                     CAMERA_TYPE = CAMERA_ORTHO ;
                     setCameraPosition() ;
+                    setStaticFrame() ;
                 }
-                else if ( event.key === 'd')
+                else if ( event.key === 'd'  ||  event.key === 'D')
                     window.alert( 'manca :(') ;
+                else if ( event.key === 'c'  ||  event.key === 'C')
+                    setCameraPosition() ;
             });
 
                                     // Elements
@@ -382,115 +376,6 @@
                 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 7b70eb1..edf3a45 100644
--- a/TestArea_IIS01/THREEJS_DOORS/style.css
+++ b/TestArea_IIS01/THREEJS_DOORS/style.css
@@ -46,7 +46,7 @@ canvas {
 
 #infoDiv {
     width: 100% ; 
-    height: auto ;
+    height: auto ; 
     color: white ;
     background-color: transparent ;
     font-size: 0.9em ;
@@ -60,3 +60,13 @@ canvas {
     right: 10px ;
     border: 1px solid black ;
 }
+
+#Ref1Render {
+    position: fixed ;
+    width: 200px ;
+    height: 200px ;
+    bottom: 10px ;
+    left: 10px ;
+    background-color: transparent ;
+    border: 1px solid black ;
+}