diff --git a/components/src/beamlineDown.svg b/components/src/beamlineDown.svg
new file mode 100644
index 0000000000000000000000000000000000000000..294b32caefb7e662bcc48d8b948d3662088f457d
--- /dev/null
+++ b/components/src/beamlineDown.svg
@@ -0,0 +1,5 @@
+<svg width="3000" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(1) translate(0 0)">
+		<polygon points="100,100 2200,300 2700,100" fill="#c7ffd6" stroke="#2f2f2f" stroke-width="3" />
+	</g>
+</svg>
diff --git a/components/src/beamlineUP.js b/components/src/beamlineUP.js
new file mode 100644
index 0000000000000000000000000000000000000000..62d7147c60df68d02248fb2eefbe4e734e1d9dc6
--- /dev/null
+++ b/components/src/beamlineUP.js
@@ -0,0 +1,13 @@
+	import * as THREE from 'three';
+
+	// Beamlines
+	export function beamlineUP(param) {
+		const length=10000;
+		const material = new THREE.MeshBasicMaterial({color: 0xA5D9FD, transparent: true, opacity: 0.4, side: THREE.DoubleSide,});
+		const geometry = new THREE.CylinderGeometry(0 /*radiusTop*/, 5 /*radiusBottom*/, length /*height*/, 100 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,0 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const beamlineUPMesh = new THREE.Mesh(geometry, material);
+		beamlineUPMesh.rotateX(Math.PI * 0.5);
+		beamlineUPMesh.scale.setZ(100);
+		beamlineUPMesh.rotatedX = true;
+		return beamlineUPMesh;
+	}
diff --git a/components/src/bending.svg b/components/src/bending.svg
new file mode 100644
index 0000000000000000000000000000000000000000..41447f7bdd136075645a84e2842180be903dd52a
--- /dev/null
+++ b/components/src/bending.svg
@@ -0,0 +1,11 @@
+<svg width="1200" height="660" viewBox="0 0 600px 330px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2)">
+		<polygon points="50,50 220,28 440,37 500,50 500,250 420,240 220,227 50,250" stroke="black" stroke-width="1" fill="forestgreen" />
+		<path d="M 46 50 Q300 5 504 50" stroke="black" stroke-width="10" fill="none" />
+		<path d="M 53 249 Q300 210 497 249" stroke="black" stroke-width="10" fill="none" />
+		<line x1="50" y1="47" x2="50" y2="254" stroke="black"  stroke-width="10" />
+		<line x1="500" y1="47" x2="500" y2="254" stroke="black"  stroke-width="10" />
+		<path d="M 45 90 a 60 80 0 0 0 0 120 M 505 90 a 60 80 0 0 1 0 120" stroke="#ffe600" stroke-width="2" fill="#ff7501" />
+		<text x="275" y="185" text-anchor="middle" font-family="Arial" font-size="150" fill="white" width="2">B</text>
+	</g>
+</svg>
diff --git a/components/src/blm.js b/components/src/blm.js
new file mode 100644
index 0000000000000000000000000000000000000000..7808e09732a56fb7d7efc3c5f582724e6be9e1c4
--- /dev/null
+++ b/components/src/blm.js
@@ -0,0 +1,39 @@
+	import * as THREE from 'three';
+
+	// Beam Loss Monitor
+	export function blm(length=100, dcolor='white', width=100) {
+		const cMaster = new THREE.Object3D();
+		const d1geometry = new THREE.BoxGeometry(length, width, width);
+		const material = new THREE.MeshLambertMaterial({color: dcolor});
+		const d1mesh = new THREE.Mesh(d1geometry, material);
+		d1mesh.position.set(-length/2, 0, 0);
+		cMaster.add(d1mesh);
+		return cMaster;
+	}
+	function blmColor(val) {
+		if (document.location.search.indexOf('demo')>-1) {
+			if (val < 0) return 'white';
+			else if (val < 1) return 'yellow';
+			else if (val < 2) return 'orange';
+			else if (val < 3) return 'red';
+			else return 'violet';
+		}
+		if (val < 20) return 'white';
+		else if (val < 50) return 'yellow';
+		else if (val < 100) return 'orange';
+		else if (val < 200) return 'red';
+		else return 'violet';
+	}
+	export function blmUpdate(c, val, direction, width=100, histogramFactor=50) {
+		if (typeof val !== 'number') val = 0; else val = Math.abs(val);
+		const blm = c.children[0];
+		blm.material.dispose();
+		blm.material = new THREE.MeshLambertMaterial({color: blmColor(val)});
+		blm.geometry.dispose();
+		blm.geometry = new THREE.BoxGeometry(width+val*histogramFactor, width, width);
+		blm.position.set(direction*(width+val*histogramFactor)/2, 0, 0);
+		blm.geometry.computeVertexNormals();
+		blm.geometry.normalsNeedUpdate = true;
+		blm.geometry.verticesNeedUpdate = true;
+		blm.geometry.dynamic = true;
+	}
diff --git a/components/src/blmplus.js b/components/src/blmplus.js
new file mode 100644
index 0000000000000000000000000000000000000000..77ffd5b127bc57e27f0282e6ae4165933f8543c4
--- /dev/null
+++ b/components/src/blmplus.js
@@ -0,0 +1,40 @@
+	import * as THREE from 'three';
+	import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
+
+	// Beam Loss Monitor
+	export function blmplus(length=100, dcolor='white', width=100) {
+		const cMaster = new THREE.Object3D();
+		const d1geometry = new RoundedBoxGeometry(length, width, width, width/2, 20);
+		const material = new THREE.MeshLambertMaterial({color: dcolor});
+		const d1mesh = new THREE.Mesh(d1geometry, material);
+		d1mesh.position.set(-length/2, 0, 0);
+		cMaster.add(d1mesh);
+		return cMaster;
+	}
+	function blmColorplus(val) {
+		if (document.location.search.indexOf('demo')>-1) {
+			if (val < 0) return 'white';
+			else if (val < 1) return 'yellow';
+			else if (val < 2) return 'orange';
+			else if (val < 3) return 'red';
+			else return 'violet';
+		}
+		if (val < 20) return 'white';
+		else if (val < 50) return 'yellow';
+		else if (val < 100) return 'orange';
+		else if (val < 200) return 'red';
+		else return 'violet';
+	}
+	export function blmUpdateplus(c, val, direction, width=100, histogramFactor=50) {
+		if (typeof val !== 'number') val = 0; else val = Math.abs(val);
+		const blm = c.children[0];
+		blm.material.dispose();
+		blm.material = new THREE.MeshLambertMaterial({color: blmColorplus(val)});
+		blm.geometry.dispose();
+		blm.geometry = new RoundedBoxGeometry(width+val*histogramFactor, width, width, width/2, 20);
+		blm.position.set(direction*(width+val*histogramFactor)/2, 0, 0);
+		blm.geometry.computeVertexNormals();
+		blm.geometry.normalsNeedUpdate = true;
+		blm.geometry.verticesNeedUpdate = true;
+		blm.geometry.dynamic = true;
+	}
diff --git a/components/src/bpm.js b/components/src/bpm.js
new file mode 100644
index 0000000000000000000000000000000000000000..d009707786d5f430951fb3748b39ed13a4af87f6
--- /dev/null
+++ b/components/src/bpm.js
@@ -0,0 +1,13 @@
+	import * as THREE from 'three';
+	// BPM (beam position monitor)
+	export function bpm(width=300, height=300, depth=50, transverse=100) {
+		const bpmObject = new THREE.Object3D();
+		const bpmmaterial = new THREE.MeshLambertMaterial({color: 0x8000ff});
+		const bpmgeometryh = new THREE.BoxGeometry(width, transverse, depth);
+		const bpmmeshh = new THREE.Mesh(bpmgeometryh, bpmmaterial);
+		bpmObject.add(bpmmeshh);
+		const bpmgeometryv = new THREE.BoxGeometry(transverse, height, depth);
+		const bpmmeshv = new THREE.Mesh(bpmgeometryv, bpmmaterial);
+		bpmObject.add(bpmmeshv);
+		return bpmObject;
+	}
diff --git a/components/src/bpm.svg b/components/src/bpm.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1dfd0b8f4bc589e44856e118d20802dc8066528d
--- /dev/null
+++ b/components/src/bpm.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 400px 210px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="translate(150 0) scale(5)">
+		<rect x="5" y="20" width="15" height="40" rx="10" ry="10" fill="violet" stroke="darkslategrey" stroke-width="3"/>
+		<line x1="12.5" y1="33" x2="12.5" y2="47" stroke="white" stroke-width="3px" />
+		<line x1="7" y1="40" x2="18" y2="40" stroke="white" stroke-width="3px" />
+	</g>
+</svg>
diff --git a/components/src/bst.js b/components/src/bst.js
new file mode 100644
index 0000000000000000000000000000000000000000..492e5493abf7d3bf10fff543fa9263a38c8450b9
--- /dev/null
+++ b/components/src/bst.js
@@ -0,0 +1,81 @@
+// jshint esversion: 6
+	import * as THREE from 'three';
+
+	// bst
+	export function bst(param) {
+		const bstObject = new THREE.Object3D();
+		const bstContiner = new THREE.Object3D();
+		const materialGrey = new THREE.MeshLambertMaterial({color: 0xc0c0c0});
+		
+		
+		const d1geometry = new THREE.CylinderGeometry(25, 25, 200, 25);
+		const d1mesh = new THREE.Mesh(d1geometry, materialGrey);
+		d1mesh.position.set(0, 190, 0);
+		bstObject.add(d1mesh);				
+		bstObject.rotateX(Math.PI * 1);
+			
+		// circ base
+		const d2geometry = new THREE.CylinderGeometry(50, 50, 80, 15);
+		const d2mesh = new THREE.Mesh(d2geometry, materialGrey);
+		d2mesh.position.set(0, 290, 0);
+		d2mesh.rotateX(Math.PI * 1);
+		d2mesh.rotateY(Math.PI * 1);
+		d2mesh.rotateZ(Math.PI * 1.5);		
+		bstObject.add(d2mesh);
+		
+		// zigrinatura
+		const d4geometry = new THREE.CylinderGeometry(40, 40, 120, 15);
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/flsc_texture.png');	
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(5, 40);		
+		const material = new THREE.MeshBasicMaterial({ map: texture });		
+		const d4mesh = new THREE.Mesh(d4geometry, material);
+		d4mesh.rotateX(Math.PI * 1);
+		d4mesh.rotateY(Math.PI * 1);
+		d4mesh.rotateZ(Math.PI * 1);
+		d4mesh.position.set(0, 120 , 0);			
+		bstObject.add(d4mesh);		
+		
+		// cil Major
+		const d5geometry = new THREE.CylinderGeometry(90, 90, 20, 15);
+		const d5mesh = new THREE.Mesh(d5geometry, materialGrey);
+		d5mesh.rotateX(Math.PI * 1);
+		d5mesh.rotateY(Math.PI * 1);
+		d5mesh.rotateZ(Math.PI * 1);
+		d5mesh.position.set(0, 50 , 0);			
+		bstObject.add(d5mesh);						
+		
+		// cil Med
+		const d6geometry = new THREE.CylinderGeometry(70, 70, 80, 15);
+		const d6mesh = new THREE.Mesh(d6geometry, materialGrey);
+		d6mesh.rotateX(Math.PI * 1);
+		d6mesh.rotateY(Math.PI * 1);
+		d6mesh.rotateZ(Math.PI * 1);
+		d6mesh.position.set(0, 0 , 0);			
+		bstObject.add(d6mesh);	
+		
+		// cil low
+		const d7geometry = new THREE.CylinderGeometry(50, 50, 120, 15);
+		const d7mesh = new THREE.Mesh(d7geometry, materialGrey);
+		d7mesh.rotateX(Math.PI * 1);
+		d7mesh.rotateY(Math.PI * 1);
+		d7mesh.rotateZ(Math.PI * 1);
+		d7mesh.position.set(0, -100 , 0);			
+		bstObject.add(d7mesh);			
+		
+				
+		const d8geometry = new THREE.CylinderGeometry(60, 60, 20, 15);
+		const d8mesh = new THREE.Mesh(d8geometry, materialGrey);
+		d8mesh.rotateX(Math.PI * 1);
+		d8mesh.rotateY(Math.PI * 1);
+		d8mesh.rotateZ(Math.PI * 1);
+		d8mesh.position.set(0, -170 , 0);			
+		bstObject.add(d8mesh);
+		
+
+		bstObject.position.set(0, 280, 0);
+		bstContiner.add(bstObject);
+		bstContiner.rotateY(Math.PI * -0.5);
+		return bstContiner;
+	}
diff --git a/components/src/bst.svg b/components/src/bst.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b2d457cf266c6a6ceaee0d5b0d6a199d8fc79557
--- /dev/null
+++ b/components/src/bst.svg
@@ -0,0 +1,5 @@
+<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<rect x="40" y="70" width="50" height="120" stroke="#2f2f2f" stroke-width="7" fill="#c7c7c7" />
+	<circle r="30" cx="65" cy="130" stroke="#2f2f2f" stroke-width="10px" />
+	<circle r="20" cx="65" cy="130" stroke="#2f2f2f" stroke-width="5px" />
+</svg>
diff --git a/components/src/cavity.js b/components/src/cavity.js
new file mode 100644
index 0000000000000000000000000000000000000000..660daf4960f5ee447ddacbd083980c0b66c6e918
--- /dev/null
+++ b/components/src/cavity.js
@@ -0,0 +1,17 @@
+	import * as THREE from 'three';
+
+	// cavity
+	export function cavity(sphereRadius=300, sphereFactor=0.5, cylinderRadius=40, cylinderHeight=600) {
+		const cavityObject = new THREE.Object3D();
+		const cavitymaterial = new THREE.MeshLambertMaterial({color: 0xb0b0b0});
+		const cavitygeometry = new THREE.SphereGeometry(sphereRadius, 32, 32);
+		const cavitymesh = new THREE.Mesh(cavitygeometry, cavitymaterial);
+		cavitymesh.scale.setZ(sphereFactor);
+		cavityObject.add(cavitymesh);
+		const rfGeometry = new THREE.CylinderGeometry(cylinderRadius, cylinderRadius,  cylinderHeight, 20, 2, false, 0, Math.PI * 2);
+		const rfMesh = new THREE.Mesh(rfGeometry, cavitymaterial);
+		// rfMesh.rotateX(Math.PI * 0.5);
+		rfMesh.position.set(0, sphereRadius, 0);
+		cavityObject.add(rfMesh);
+		return cavityObject;
+	}
diff --git a/components/src/cavity.svg b/components/src/cavity.svg
new file mode 100644
index 0000000000000000000000000000000000000000..60086e9f58fce39d6abcf13266f6308596eccbd7
--- /dev/null
+++ b/components/src/cavity.svg
@@ -0,0 +1,9 @@
+<svg width="800" height="600" viewBox="0 0 400px 300px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2)">
+		<path d="M 80 50 a 60 100 0 0 0 0 220 M 80 50 a 60 100 0 0 1 0 220" stroke="#f5b942" stroke-width="5" fill="#B87333" />
+		<path d="M 80 60 a 60 101 0 0 0 0 200 M 80 60 a 60 101 0 0 1 0 200" stroke="#f5b942" stroke-width="5" fill="#B87333" />
+		<path d="M 80 70 a 60 97 0 0 0 0 180 M 80 70 a 60 97 0 0 1 0 180" stroke="#f5b942" stroke-width="5" fill="#B87333" />
+		<path d="M 80 80 a 60 100 0 0 0 0 160 M 80 80 a 60 100 0 0 1 0 160" stroke="#f5b942" stroke-width="5" fill="#B87333" />
+		<circle r="20" cx="80" cy="160" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+	</g>
+</svg>
diff --git a/components/src/cavity_3hc.js b/components/src/cavity_3hc.js
new file mode 100644
index 0000000000000000000000000000000000000000..b27c789d039e60325dd9c4f45e8ae78da3193877
--- /dev/null
+++ b/components/src/cavity_3hc.js
@@ -0,0 +1,236 @@
+// jshint esversion: 6 
+import * as THREE from 'three';
+
+	// 3hc
+	export function cavity_3hc(length=1500) {
+		const threeHCSR = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const dmaterial2 = new THREE.MeshLambertMaterial({color: 0xffffff});
+		const d1geometry = new THREE.CylinderGeometry(700, 700, length, 35);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		threeHCSR.add(d1mesh);				
+		threeHCSR.rotateX(Math.PI * 0.5);
+		threeHCSR.rotatedX = true;	
+
+		// left
+		const lrgeometry = new THREE.CylinderGeometry(750, 750, 100, 65);
+		const d2mesh = new THREE.Mesh(lrgeometry, dmaterial);
+		d2mesh.position.set(0, -length/2-50, 0);
+		threeHCSR.add(d2mesh);
+
+		// right
+		const d3mesh = new THREE.Mesh(lrgeometry, dmaterial);
+		d3mesh.position.set(0, length/2+50, 0);
+		threeHCSR.add(d3mesh);
+
+		// up1
+		const udgeometry = new THREE.CylinderGeometry(250, 250, 100, 25);
+		const d4mesh = new THREE.Mesh(udgeometry, dmaterial);
+		d4mesh.rotateX(Math.PI * 0.5);
+		d4mesh.rotateY(Math.PI * 1);
+		d4mesh.rotateZ(Math.PI * 1);
+		d4mesh.position.set(0, -400 , -730);		
+		threeHCSR.add(d4mesh);
+
+		// up2
+		const udgeometry2 = new THREE.CylinderGeometry(150, 150, 100, 25);
+		const d5mesh = new THREE.Mesh(udgeometry2, dmaterial);
+		d5mesh.rotateX(Math.PI * 0.5);
+		d5mesh.rotateY(Math.PI * 1);
+		d5mesh.rotateZ(Math.PI * 1);
+		d5mesh.position.set(0, 400 , -730);		
+		threeHCSR.add(d5mesh);
+
+		// up1a
+		const udgeometrya = new THREE.CylinderGeometry(200, 200, 250, 25);
+		const d6mesh = new THREE.Mesh(udgeometrya, dmaterial);
+		d6mesh.rotateX(Math.PI * 0.5);
+		d6mesh.rotateY(Math.PI * 1);
+		d6mesh.rotateZ(Math.PI * 1);
+		d6mesh.position.set(0, -400 , -870);		
+		threeHCSR.add(d6mesh);		
+		
+		// up1b
+		const udgeometryb = new THREE.CylinderGeometry(250, 250, 100, 25);
+		const d7mesh = new THREE.Mesh(udgeometryb, dmaterial);
+		d7mesh.rotateX(Math.PI * 0.5);
+		d7mesh.rotateY(Math.PI * 1);
+		d7mesh.rotateZ(Math.PI * 1);
+		d7mesh.position.set(0, -400 , -1000);		
+		threeHCSR.add(d7mesh);	
+		
+		// up1c
+		const udgeometryc = new THREE.CylinderGeometry(200, 200, 400, 25);
+		const d8mesh = new THREE.Mesh(udgeometryc, dmaterial);
+		d8mesh.rotateX(Math.PI * 0.5);
+		d8mesh.rotateY(Math.PI * 1);
+		d8mesh.rotateZ(Math.PI * 1);
+		d8mesh.position.set(0, -400 , -1100);		
+		threeHCSR.add(d8mesh);	
+		
+		// up2d
+		const udgeometry2d = new THREE.CylinderGeometry(100, 100, 200, 25);
+		const d9mesh = new THREE.Mesh(udgeometry2d, dmaterial);
+		d9mesh.rotateX(Math.PI * 0.5);
+		d9mesh.rotateY(Math.PI * 1);
+		d9mesh.rotateZ(Math.PI * 1);
+		d9mesh.position.set(0, 400 , -830);		
+		threeHCSR.add(d9mesh);		
+
+		// up2e
+		const udgeometry2e = new THREE.CylinderGeometry(130, 130, 100, 25);
+		const d10mesh = new THREE.Mesh(udgeometry2e, dmaterial);
+		d10mesh.rotateX(Math.PI * 0.5);
+		d10mesh.rotateY(Math.PI * 1);
+		d10mesh.rotateZ(Math.PI * 1);
+		d10mesh.position.set(0, 400 , -930);		
+		threeHCSR.add(d10mesh);			
+		
+		
+		//tubo1
+		const tubegeometry1 = new THREE.CylinderGeometry(30, 30, 1100, 25);
+		const d12mesh = new THREE.Mesh(tubegeometry1, dmaterial);
+		d12mesh.rotateX(Math.PI * 0.5);
+		d12mesh.rotateY(Math.PI * 0.5);
+		d12mesh.rotateZ(Math.PI * 0.5);
+		d12mesh.position.set(-430, -150 , -930);		
+		threeHCSR.add(d12mesh);	
+		
+		//tubo2
+		const tubegeometry2 = new THREE.CylinderGeometry(30, 30, 450, 25);
+		const d13mesh = new THREE.Mesh(tubegeometry2, dmaterial);
+		d13mesh.rotateX(Math.PI * 0.5);
+		d13mesh.rotateY(Math.PI * 1);
+		d13mesh.rotateZ(Math.PI * 0.5);
+		d13mesh.position.set(-200, 400 , -930);		
+		threeHCSR.add(d13mesh);			
+		
+		//sferacopritubo
+		const sphereGeometry = new THREE.SphereGeometry(30, 30, 30);
+		const d14mesh = new THREE.Mesh(sphereGeometry, dmaterial);
+		d14mesh.position.set(-430, 400 , -930);		
+		threeHCSR.add(d14mesh);			
+		
+		//up3
+		const udgeometry2g = new THREE.CylinderGeometry(50, 50, 100, 25);
+		const d15mesh = new THREE.Mesh(udgeometry2g, dmaterial);
+		d15mesh.rotateX(Math.PI * 0.5);
+		d15mesh.rotateY(Math.PI * 1);
+		d15mesh.rotateZ(Math.PI * 1);
+		d15mesh.position.set(0, 650 , -700);		
+		threeHCSR.add(d15mesh);	
+		
+		
+		//up3a
+		const udgeometry2h = new THREE.CylinderGeometry(30, 30, 400, 25);
+		const d16mesh = new THREE.Mesh(udgeometry2h, dmaterial);
+		d16mesh.rotateX(Math.PI * 0.5);
+		d16mesh.rotateY(Math.PI * 1);
+		d16mesh.rotateZ(Math.PI * 1);
+		d16mesh.position.set(0, 650 , -900);		
+		threeHCSR.add(d16mesh);		
+		
+		//up3b
+		const udgeometry2l = new THREE.CylinderGeometry(30, 30, 400, 25);
+		const d17mesh = new THREE.Mesh(udgeometry2l, dmaterial);
+		d17mesh.rotateX(Math.PI * 0.5);
+		d17mesh.rotateY(Math.PI * 1);
+		d17mesh.rotateZ(Math.PI * 1);
+		d17mesh.position.set(0, 650 , -900);		
+		threeHCSR.add(d16mesh);				
+		
+		//up3c
+		const udgeometry2m = new THREE.CylinderGeometry(30, 30, 400, 25);
+		const d18mesh = new THREE.Mesh(udgeometry2m, dmaterial);
+		d18mesh.rotateX(Math.PI * 0.5);
+		d18mesh.rotateY(Math.PI * 0.75);
+		d18mesh.rotateZ(Math.PI * 1.5);
+		d18mesh.position.set(-140, 790 , -1100);		
+		threeHCSR.add(d18mesh);			
+ 
+		//sferacopritubo laterale
+		const sphereGeometry2 = new THREE.SphereGeometry(30, 30, 30);
+		const d19mesh = new THREE.Mesh(sphereGeometry2, dmaterial);
+		d19mesh.position.set(0, 650 , -1100);		
+		threeHCSR.add(d19mesh);			
+		
+		//tubilaterali1
+		const lateraltube1 = new THREE.CylinderGeometry(180, 180, 100, 25);
+		const d20mesh = new THREE.Mesh(lateraltube1, dmaterial);
+		d20mesh.rotateX(Math.PI * 0.5);
+		d20mesh.rotateY(Math.PI * 1);
+		d20mesh.rotateZ(Math.PI * 0.5);
+		d20mesh.position.set(-700, -400 , 0);		
+		threeHCSR.add(d20mesh);
+
+		//tubilaterali1a
+		const lateraltube1a = new THREE.CylinderGeometry(120, 120, 200, 25);
+		const d21mesh = new THREE.Mesh(lateraltube1a, dmaterial);
+		d21mesh.rotateX(Math.PI * 0.5);
+		d21mesh.rotateY(Math.PI * 1);
+		d21mesh.rotateZ(Math.PI * 0.5);
+		d21mesh.position.set(-800, -400 , 0);		
+		threeHCSR.add(d21mesh);		
+		
+		//cubo1
+		const cube1 = new THREE.BoxGeometry(240, 240, 240);
+		const d22mesh = new THREE.Mesh(cube1, dmaterial);
+		d22mesh.position.set(-1000, -400 , 0);
+		threeHCSR.add(d22mesh);	
+		
+		//cubo2 red
+		const cube2 = new THREE.BoxGeometry(190, 190, 190);
+		const cubematerial = new THREE.MeshLambertMaterial({color: 0xFF0000});
+		const d23mesh = new THREE.Mesh(cube2, cubematerial);
+		d23mesh.position.set(-1000, -400 , -50);
+		threeHCSR.add(d23mesh);	
+		
+		//tubilaterali2a
+		const lateraltube2a = new THREE.CylinderGeometry(140, 140, 200, 25);
+		const d24mesh = new THREE.Mesh(lateraltube2a, dmaterial);
+		d24mesh.rotateX(Math.PI * 0.5);
+		d24mesh.rotateY(Math.PI * 1);
+		d24mesh.rotateZ(Math.PI * 0.5);
+		d24mesh.position.set(-650, 0 , 0);		
+		threeHCSR.add(d24mesh);		
+		
+		//tubilaterali2b
+		const lateraltube2b = new THREE.CylinderGeometry(180, 180, 50, 25);
+		const d25mesh = new THREE.Mesh(lateraltube2b, dmaterial);
+		d25mesh.rotateX(Math.PI * 0.5);
+		d25mesh.rotateY(Math.PI * 1);
+		d25mesh.rotateZ(Math.PI * 0.5);
+		d25mesh.position.set(-770, 0 , 0);		
+		threeHCSR.add(d25mesh);		
+		
+		//tubilaterali3a
+		const lateraltube3a = new THREE.CylinderGeometry(180, 180, 110, 25);
+		const d26mesh = new THREE.Mesh(lateraltube3a, dmaterial);
+		d26mesh.rotateX(Math.PI * 0.5);
+		d26mesh.rotateY(Math.PI * 1);
+		d26mesh.rotateZ(Math.PI * 0.5);
+		d26mesh.position.set(-680, 520 , -200);	
+		threeHCSR.add(d26mesh);			
+		
+		//bulloni front
+		const bulloni1 = new THREE.CylinderGeometry(10, 10, 10, 8);
+		const d27mesh = new THREE.Mesh(bulloni1, dmaterial2);
+		d27mesh.rotateX(Math.PI * 0.5);
+		d27mesh.rotateY(Math.PI * 1);
+		d27mesh.rotateZ(Math.PI * 0.5);
+		d27mesh.position.set(-800,100,-120);
+		const bolt = new THREE.Object3D();
+		const bolts = new THREE.Object3D();
+		bolt.add(d27mesh);	
+		for (let i=-6; i<6; i++) {
+			const bolt2 = bolt.clone();
+			bolt2.rotateX(-Math.PI / 6*i);
+			bolts.add(bolt2);
+		}
+		bolts.add(bolt);
+		const bolts2 = bolts.clone();
+		bolts2.position.set(60,520,-200);
+		threeHCSR.add(bolts);	
+		threeHCSR.add(bolts2);	
+		return threeHCSR;
+	}
diff --git a/components/src/cavity_3hc.svg b/components/src/cavity_3hc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3568a2cade2fbceca9e9bc5dcfdfe81986d0cf64
--- /dev/null
+++ b/components/src/cavity_3hc.svg
@@ -0,0 +1,24 @@
+<svg viewBox="0 0 700px 350px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2)">
+		<rect x="40" y="70" width="300" height="200" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<rect x="20" y="40" width="40" height="260" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<rect x="340" y="40" width="40" height="260" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<circle r="30" cx="120" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="10px" />
+		<circle r="20" cx="120" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="30" cx="220" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="10px" />
+		<circle r="20" cx="220" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="25" cx="300" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="10px" />
+		<circle r="15" cx="300" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="5" cx="160" cy="145" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="5" cx="180" cy="145" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="5" cx="160" cy="180" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="5" cx="180" cy="180" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<rect x="260" y="230" width="40" height="20" stroke="#2f2f2f" stroke-width="6" fill="#c7c7c7" />
+		<rect x="210" y="275" width="40" height="20" stroke="#2f2f2f" stroke-width="6" fill="#c7c7c7" />
+		<rect x="95" y="275" width="50" height="40" stroke="#2f2f2f" stroke-width="6" fill="#c7c7c7" />
+		<rect x="100" y="300" width="40" height="30" stroke="#2f2f2f" stroke-width="6" fill="red" />
+		<line x1="300" y1="165" x2="400" y2="220" stroke="black" stroke-width="13px" />
+		<line x1="220" y1="165" x2="220" y2="220" stroke="black" stroke-width="13px" />
+		<line x1="75" y1="220" x2="225" y2="220" stroke="black" stroke-width="13px" />
+	</g>
+</svg>
diff --git a/components/src/cavity_3hcfast.js b/components/src/cavity_3hcfast.js
new file mode 100644
index 0000000000000000000000000000000000000000..4ada6f72fa762104d44afbdc0f140382fecbdaa2
--- /dev/null
+++ b/components/src/cavity_3hcfast.js
@@ -0,0 +1,125 @@
+// jshint esversion: 6 
+import * as THREE from 'three';
+
+	// 3hc
+	export function cavity_3hcfast(length=1500) {
+		const threeHCSR = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const dmaterial2 = new THREE.MeshLambertMaterial({color: 0xffffff});
+		const d1geometry = new THREE.CylinderGeometry(700, 700, length, 35);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		threeHCSR.add(d1mesh);				
+		threeHCSR.rotateX(Math.PI * 0.5);
+		threeHCSR.rotatedX = true;	
+
+		// left
+		const lrgeometry = new THREE.CylinderGeometry(750, 750, 100, 65);
+		const d2mesh = new THREE.Mesh(lrgeometry, dmaterial);
+		d2mesh.position.set(0, -length/2-50, 0);
+		threeHCSR.add(d2mesh);
+
+		// right
+		const d3mesh = new THREE.Mesh(lrgeometry, dmaterial);
+		d3mesh.position.set(0, length/2+50, 0);
+		threeHCSR.add(d3mesh);
+
+		// up1
+		const udgeometry = new THREE.CylinderGeometry(250, 250, 700, 25);
+		const d4mesh = new THREE.Mesh(udgeometry, dmaterial);
+		d4mesh.rotateX(Math.PI * 0.5);
+		d4mesh.rotateY(Math.PI * 1);
+		d4mesh.rotateZ(Math.PI * 1);
+		d4mesh.position.set(0, -400 , -730);		
+		threeHCSR.add(d4mesh);
+
+		// up2
+		const udgeometry2 = new THREE.CylinderGeometry(150, 150, 700, 25);
+		const d5mesh = new THREE.Mesh(udgeometry2, dmaterial);
+		d5mesh.rotateX(Math.PI * 0.5);
+		d5mesh.rotateY(Math.PI * 1);
+		d5mesh.rotateZ(Math.PI * 1);
+		d5mesh.position.set(0, 400 , -730);		
+		threeHCSR.add(d5mesh);
+
+		
+		//tubo1
+		const tubegeometry1 = new THREE.CylinderGeometry(30, 30, 1100, 25);
+		const d12mesh = new THREE.Mesh(tubegeometry1, dmaterial);
+		d12mesh.rotateX(Math.PI * 0.5);
+		d12mesh.rotateY(Math.PI * 0.5);
+		d12mesh.rotateZ(Math.PI * 0.5);
+		d12mesh.position.set(-430, -150 , -930);		
+		threeHCSR.add(d12mesh);	
+		
+		//tubo2
+		const tubegeometry2 = new THREE.CylinderGeometry(30, 30, 450, 25);
+		const d13mesh = new THREE.Mesh(tubegeometry2, dmaterial);
+		d13mesh.rotateX(Math.PI * 0.5);
+		d13mesh.rotateY(Math.PI * 1);
+		d13mesh.rotateZ(Math.PI * 0.5);
+		d13mesh.position.set(-200, 400 , -930);		
+		threeHCSR.add(d13mesh);			
+		
+		//sferacopritubo
+		const sphereGeometry = new THREE.SphereGeometry(30, 30, 30);
+		const d14mesh = new THREE.Mesh(sphereGeometry, dmaterial);
+		d14mesh.position.set(-430, 400 , -930);		
+		threeHCSR.add(d14mesh);			
+
+		
+		//up3a
+		const udgeometry2h = new THREE.CylinderGeometry(30, 30, 400, 25);
+		const d16mesh = new THREE.Mesh(udgeometry2h, dmaterial);
+		d16mesh.rotateX(Math.PI * 0.5);
+		d16mesh.rotateY(Math.PI * 1);
+		d16mesh.rotateZ(Math.PI * 1);
+		d16mesh.position.set(0, 650 , -900);		
+		threeHCSR.add(d16mesh);		
+				
+		
+		//up3c
+		const udgeometry2m = new THREE.CylinderGeometry(30, 30, 400, 25);
+		const d18mesh = new THREE.Mesh(udgeometry2m, dmaterial);
+		d18mesh.rotateX(Math.PI * 0.5);
+		d18mesh.rotateY(Math.PI * 0.75);
+		d18mesh.rotateZ(Math.PI * 1.5);
+		d18mesh.position.set(-140, 790 , -1100);		
+		threeHCSR.add(d18mesh);			
+ 
+		//sferacopritubo laterale
+		const sphereGeometry2 = new THREE.SphereGeometry(30, 30, 30);
+		const d19mesh = new THREE.Mesh(sphereGeometry2, dmaterial);
+		d19mesh.position.set(0, 650 , -800);		
+		threeHCSR.add(d19mesh);			
+
+		
+		//cubo1
+		const cube1 = new THREE.BoxGeometry(440, 240, 240);
+		const d22mesh = new THREE.Mesh(cube1, dmaterial);
+		d22mesh.position.set(-800, -400 , 0);
+		threeHCSR.add(d22mesh);	
+		
+		
+		//tubilaterali2a
+		const lateraltube2a = new THREE.CylinderGeometry(140, 140, 200, 25);
+		const d24mesh = new THREE.Mesh(lateraltube2a, dmaterial);
+		d24mesh.rotateX(Math.PI * 0.5);
+		d24mesh.rotateY(Math.PI * 1);
+		d24mesh.rotateZ(Math.PI * 0.5);
+		d24mesh.position.set(-650, 0 , 0);		
+		threeHCSR.add(d24mesh);			
+
+		
+		//tubilaterali3a
+		const lateraltube3a = new THREE.CylinderGeometry(180, 180, 110, 25);
+		const d26mesh = new THREE.Mesh(lateraltube3a, dmaterial);
+		d26mesh.rotateX(Math.PI * 0.5);
+		d26mesh.rotateY(Math.PI * 1);
+		d26mesh.rotateZ(Math.PI * 0.5);
+		d26mesh.position.set(-680, 520 , -200);	
+		threeHCSR.add(d26mesh);			
+		
+
+		
+		return threeHCSR;
+	}
diff --git a/components/src/cavitylinac.js b/components/src/cavitylinac.js
new file mode 100644
index 0000000000000000000000000000000000000000..2e66a2a63b27024c0d399ea1e0cb2e514da2f7ff
--- /dev/null
+++ b/components/src/cavitylinac.js
@@ -0,0 +1,13 @@
+	import * as THREE from 'three';
+
+	// cavity for linac
+	export function cavitylinac(length=2900) {
+		const cavitylinacMaster = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const d1geometry = new THREE.CylinderGeometry(400, 400, length, 25);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		cavitylinacMaster.add(d1mesh);				
+		cavitylinacMaster.rotateX(Math.PI * 0.5);
+		cavitylinacMaster.rotatedX = true;
+		return cavitylinacMaster;
+	}
diff --git a/components/src/cavitylinac.svg b/components/src/cavitylinac.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4156f6a71df8c098170a45dcf55b68ead2f9406d
--- /dev/null
+++ b/components/src/cavitylinac.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 3100px 210px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2)">
+		<rect x="50" y="30" width="3000" height="210" rx="10" ry="10" fill="#777777" stroke="darkslategrey" stroke-width="5"/>
+		<text x="800" y="120" text-anchor="middle" font-family="Arial" font-size="90" fill="white" width="2">Cavity</text>
+	</g>
+</svg>
diff --git a/components/src/chamber.js b/components/src/chamber.js
new file mode 100644
index 0000000000000000000000000000000000000000..f5c34f4d2419029dca894d7fdd045942810c0da0
--- /dev/null
+++ b/components/src/chamber.js
@@ -0,0 +1,12 @@
+	import * as THREE from 'three';
+
+	// vacuum chamber
+	export function chamber(length=3000) {
+		const chamberMaterial = new THREE.MeshLambertMaterial({color: 0xc0c0c0});
+		const chamberGeometry = new THREE.CylinderGeometry(25 /*radiusTop*/, 25 /*radiusBottom*/, length /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,0 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const chamberMesh = new THREE.Mesh(chamberGeometry, chamberMaterial);
+		chamberMesh.rotateX(Math.PI * 0.5);
+		chamberMesh.scale.setX(2);
+		chamberMesh.rotatedX = true;
+		return chamberMesh;
+	}
diff --git a/components/src/corrector.js b/components/src/corrector.js
new file mode 100644
index 0000000000000000000000000000000000000000..b44f01d4477c9acb9861bab95f74915515b30eb3
--- /dev/null
+++ b/components/src/corrector.js
@@ -0,0 +1,49 @@
+	import * as THREE from 'three';
+
+	// corrector
+	export function corrector(length=170) {
+		const CorrectorContiner = new THREE.Object3D();
+		const correctorObject = new THREE.Object3D();
+		
+		// box esterno
+		const correctormaterial = new THREE.MeshLambertMaterial({color: 0x4040b0, side: THREE.DoubleSide});
+		const correctorgeometry = new THREE.CylinderGeometry(250 /*radiusTop*/, 250 /*radiusBottom*/, length /*height*/, 4 /*radialSegments*/, 2 /*heightSegments*/, true /*openEnded*/,0 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const d1mesh = new THREE.Mesh(correctorgeometry, correctormaterial);
+		correctormaterial.flatShading = true;
+		d1mesh.position.set(0, 0, 0);
+		d1mesh.rotateX(Math.PI * 1.25);
+		d1mesh.rotateY(Math.PI * 1);
+		d1mesh.rotateZ(Math.PI * 1.5);	
+		correctorObject.add(d1mesh);
+		
+		// box up
+		const correctormaterial2 = new THREE.MeshLambertMaterial({color: 0x4040b0});
+		const correctorgeometry2 = new THREE.CylinderGeometry(55, 55, 120);
+		const d2mesh = new THREE.Mesh(correctorgeometry2, correctormaterial2);
+		d2mesh.position.set(0, 100, 0);
+		d2mesh.rotateX(Math.PI * 1.5);
+		correctorObject.add(d2mesh);		
+		
+		// box left
+		const correctormaterial3 = new THREE.MeshLambertMaterial({color: 0x4040b0});
+		const correctorgeometry3 = new THREE.CylinderGeometry(55, 55, 120);
+		const d3mesh = new THREE.Mesh(correctorgeometry3, correctormaterial3);
+		d3mesh.position.set(0, -40, 100);
+		d3mesh.rotateX(Math.PI * 1.0);
+		correctorObject.add(d3mesh);		
+		
+		// box right
+		const correctormaterial4 = new THREE.MeshLambertMaterial({color: 0x4040b0});
+		const correctorgeometry4 = new THREE.CylinderGeometry(55, 55, 120);
+		const d4mesh = new THREE.Mesh(correctorgeometry4, correctormaterial4);
+		d4mesh.position.set(-0, -40, -100);
+		d4mesh.rotateX(Math.PI * 1.0);
+		correctorObject.add(d4mesh);		
+		
+		correctorObject.position.set(0, 0, 0);
+		CorrectorContiner.add(correctorObject);
+		CorrectorContiner.rotateY(Math.PI * -0.5);		
+		
+		
+		return CorrectorContiner;
+	}
diff --git a/components/src/corrector.svg b/components/src/corrector.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bb017f5065177e759e1bccbbd2630a6e4dea644e
--- /dev/null
+++ b/components/src/corrector.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 400px 210px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2)">
+		<path d="M 48 70 a 60 55 0 0 0 0 60 M 100 70 a 60 55 0 0 1 0 60" stroke="#ffe600" stroke-width="2" fill="#ff7501" />
+		<rect x="50" y="50" width="50" height="100" rx="10" ry="10" fill="blue" stroke="darkslategrey" stroke-width="5"/>
+		<text x="75" y="80" text-anchor="middle" font-family="Arial" font-size="55" fill="white" width="2" transform="scale(1 1.7)">C</text>
+	</g>
+</svg>
diff --git a/components/src/correctorbooster.js b/components/src/correctorbooster.js
new file mode 100644
index 0000000000000000000000000000000000000000..beb8549beb3bd92b56218bada8af9d6ef5531390
--- /dev/null
+++ b/components/src/correctorbooster.js
@@ -0,0 +1,62 @@
+	import * as THREE from 'three';
+
+	// corrector booster
+	export function correctorbooster(length=140) {
+		const CorrectorContiner = new THREE.Object3D();
+		const correctorObject = new THREE.Object3D();
+		
+		// box esterno
+		const correctormaterial = new THREE.MeshLambertMaterial({color: 0x4040b0});
+		const correctorgeometry = new THREE.BoxGeometry(140, 65, length);
+		const d1mesh = new THREE.Mesh(correctorgeometry, correctormaterial);
+		correctormaterial.flatShading = true;
+		d1mesh.position.set(0, 0, 0);
+		d1mesh.rotateX(Math.PI * 1.250);
+		d1mesh.rotateY(Math.PI * 1.5);
+		d1mesh.rotateZ(Math.PI * 1.25);	
+		d1mesh.position.set(0, 0, 0);
+		correctorObject.add(d1mesh);
+		
+		// box lato1
+		const correctormaterial2 = new THREE.MeshLambertMaterial({color: 0x4040b0});
+		const correctorgeometry2 = new THREE.BoxGeometry(140, 20, 140 );
+		const d2mesh = new THREE.Mesh(correctorgeometry2, correctormaterial2);
+		correctormaterial.flatShading = true;
+		d2mesh.position.set(0, 0, 0);
+		d2mesh.rotateX(Math.PI * 1.5);
+		d2mesh.rotateY(Math.PI * 1);
+		d2mesh.rotateZ(Math.PI * 1.5);	
+		d2mesh.position.set(-80, 37, 0);
+		correctorObject.add(d2mesh);		
+		
+		// box lato2
+		const correctormaterial3 = new THREE.MeshLambertMaterial({color: 0x4040b0});
+		const correctorgeometry3 = new THREE.BoxGeometry(140, 20, 140 );
+		const d3mesh = new THREE.Mesh(correctorgeometry3, correctormaterial3);
+		correctormaterial.flatShading = true;
+		d3mesh.position.set(0, 0, 0);
+		d3mesh.rotateX(Math.PI * 1.5);
+		d3mesh.rotateY(Math.PI * 1);
+		d3mesh.rotateZ(Math.PI * 1.5);	
+		d3mesh.position.set(80, 37, 0);
+		correctorObject.add(d3mesh);		
+		
+		//Coil
+		const d4geometry = new THREE.CylinderGeometry(30, 30, 140, 15);
+		const correctormaterial4 = new THREE.MeshLambertMaterial({color: 0xc08000});
+		const d4mesh = new THREE.Mesh(d4geometry, correctormaterial4);
+		d4mesh.rotateX(Math.PI * 1);
+		d4mesh.rotateY(Math.PI * 1.0);
+		d4mesh.rotateZ(Math.PI * 1.5);
+		d4mesh.position.set(0, 100 , 0);			
+		correctorObject.add(d4mesh);				
+		
+		correctorObject.position.set(0, -150, 0);
+		correctorObject.scale.setX(3);
+		correctorObject.scale.setY(3);
+		CorrectorContiner.add(correctorObject);
+		CorrectorContiner.rotateY(Math.PI * -1);		
+		
+		
+		return CorrectorContiner;
+	}
diff --git a/components/src/correctorboosterfast.js b/components/src/correctorboosterfast.js
new file mode 100644
index 0000000000000000000000000000000000000000..59cf2d82a9d04792dfeeacdfd62d9ff3dcb55593
--- /dev/null
+++ b/components/src/correctorboosterfast.js
@@ -0,0 +1,11 @@
+	import * as THREE from 'three';
+
+	// corrector
+	export function correctorboosterfast(width=250, height=250, depth=200) {
+		const correctorObject = new THREE.Object3D();
+		const correctormaterial = new THREE.MeshLambertMaterial({color: 0x4040b0});
+		const correctorgeometry = new THREE.BoxGeometry(width, height, depth);
+		const correctormesh = new THREE.Mesh(correctorgeometry, correctormaterial);
+		correctorObject.add(correctormesh);
+		return correctorObject;
+	}
diff --git a/components/src/correctorfast.js b/components/src/correctorfast.js
new file mode 100644
index 0000000000000000000000000000000000000000..121cbc87726219e885365d2a2a9087a14d9164cb
--- /dev/null
+++ b/components/src/correctorfast.js
@@ -0,0 +1,11 @@
+	import * as THREE from 'three';
+
+	// corrector
+	export function correctorfast(width=250, height=250, depth=200) {
+		const correctorObject = new THREE.Object3D();
+		const correctormaterial = new THREE.MeshLambertMaterial({color: 0x4040b0});
+		const correctorgeometry = new THREE.BoxGeometry(width, height, depth);
+		const correctormesh = new THREE.Mesh(correctorgeometry, correctormaterial);
+		correctorObject.add(correctormesh);
+		return correctorObject;
+	}
diff --git a/components/src/correctorfermi.js b/components/src/correctorfermi.js
new file mode 100644
index 0000000000000000000000000000000000000000..39f083689c19c75a48ef8f067e7f60d20582f091
--- /dev/null
+++ b/components/src/correctorfermi.js
@@ -0,0 +1,101 @@
+// jshint esversion: 6	
+	import * as THREE from 'three';
+
+
+	// corrector fermi
+	export function correctorfermi(length=400) {
+		const CorrectorContiner = new THREE.Object3D();
+		const CorrectorMaster = new THREE.Object3D();
+		
+		// coil settings
+		const loader = new THREE.TextureLoader();
+		const texture = loader.load('./components/coil_texture_fermi.png');
+		const textureTop = texture.clone();
+		const textureSide = texture.clone();
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(2, 20);
+		textureTop.center.set(0.5, 0.5);
+		textureTop.rotation = THREE.MathUtils.degToRad(90);
+		textureSide.offset.set(0, 0.8);
+		const dmaterial = new THREE.MeshLambertMaterial({map: texture});
+		const face = new THREE.MeshBasicMaterial({map: texture});
+		const faceTop = new THREE.MeshBasicMaterial({map: textureTop});
+		const faceSide = new THREE.MeshBasicMaterial({map: textureSide});
+		const materials = [face,face,faceTop,faceSide,faceSide,faceSide];
+		const d1geometry = new THREE.CylinderGeometry(500, 500, length, 4 /*radialSegments*/, 2 /*heightSegments*/, true /*openEnded*/,0 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const d1mesh = new THREE.Mesh(d1geometry, materials);
+		d1mesh.position.set(0, 0, 0);
+		d1mesh.rotateX(Math.PI * 1.25);
+		d1mesh.rotateY(Math.PI * 1);
+		d1mesh.rotateZ(Math.PI * 1.5);	
+		CorrectorMaster.add(d1mesh);	
+		
+	
+
+		//spessore esterno plastica bianca
+		const redmaterialp = new THREE.MeshLambertMaterial({color: 0xeD2D2D2, side:THREE.DoubleSide});
+		const geometry_1p = new THREE.CylinderGeometry(501 /*radiusTop*/, 501 /*radiusBottom*/, 90 /*height*/, 4 /*radialSegments*/, 2 /*heightSegments*/, true /*openEnded*/,0 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const dmesh_1p = new THREE.Mesh(geometry_1p, redmaterialp);
+		dmesh_1p.position.set(0, 0, 0);
+		dmesh_1p.rotateX(Math.PI * 1.25);
+		dmesh_1p.rotateY(Math.PI * 1);
+		dmesh_1p.rotateZ(Math.PI * 1.5);	
+		CorrectorMaster.add(dmesh_1p); 
+		
+		//spessore alto centro
+		const redmaterial_5 = new THREE.MeshLambertMaterial({color: 0xeD2D2D2});
+		const geometry_1_5 = new THREE.BoxGeometry(length, 150, 700);
+		const dmesh_1_5 = new THREE.Mesh(geometry_1_5, redmaterial_5);
+		dmesh_1_5.position.set(0, 277, 0);
+		CorrectorMaster.add(dmesh_1_5);
+		
+		//spessore basso
+		const dmesh_2 = new THREE.Mesh(geometry_1_5, redmaterial_5);
+		dmesh_2.position.set(0, -277, 0);
+		CorrectorMaster.add(dmesh_2);
+		
+		//spessore destro
+		const geometry_3 = new THREE.BoxGeometry(length, 600, 150);
+		const dmesh_3 = new THREE.Mesh(geometry_3, redmaterial_5);
+		dmesh_3.position.set(0, 0, -275);
+		CorrectorMaster.add(dmesh_3);	
+		
+		//spessore sinistro
+		const dmesh_4 = new THREE.Mesh(geometry_3, redmaterial_5);
+		dmesh_4.position.set(0, 0, 275);
+		CorrectorMaster.add(dmesh_4);	
+		
+		//cubo al centro
+		const loader_2 = new THREE.TextureLoader();
+		const texture_2 = loader.load('./components/coil_texture_fermi.png');
+		texture_2.wrapS = texture_2.wrapT = THREE.RepeatWrapping;
+		texture_2.repeat.set(20, 20);
+		const textureTop_2 = texture.clone();
+		const textureSide_2 = texture.clone();
+		const dmaterial_2 = new THREE.MeshLambertMaterial({map: texture_2});
+		const geometry_2 = new THREE.BoxGeometry(390, 390, 390);
+		const dmesh_5 = new THREE.Mesh(geometry_2, dmaterial_2);
+		dmesh_5.position.set(0, 0, 0);		
+		CorrectorMaster.add(dmesh_5);
+		
+		//spessore interno plastica bianca
+		const redmaterial_6 = new THREE.MeshLambertMaterial({color: 0xeD2D2D2, side:THREE.DoubleSide});
+		const geometry_6 = new THREE.CylinderGeometry(280 /*radiusTop*/, 280 /*radiusBottom*/, 90 /*height*/, 4 /*radialSegments*/, 2 /*heightSegments*/, true /*openEnded*/,0 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const dmesh_6 = new THREE.Mesh(geometry_6, redmaterial_6);
+		dmesh_6.position.set(0, 0, 0);
+		dmesh_6.rotateX(Math.PI * 1);
+		dmesh_6.rotateY(Math.PI * 1.25);
+		dmesh_6.rotateZ(Math.PI * 1);	
+		CorrectorMaster.add(dmesh_6); 
+				
+
+		
+		CorrectorMaster.position.set(0, 0, 0);
+		CorrectorContiner.add(CorrectorMaster);
+		CorrectorContiner.rotateY(Math.PI * 1);
+		CorrectorContiner.scale.setX(0.25);
+		CorrectorContiner.scale.setY(0.125);
+		CorrectorContiner.scale.setZ(0.25);
+		
+		return CorrectorContiner;
+	}
diff --git a/components/src/dipole.js b/components/src/dipole.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ef9e453cfe9e8c333e5427b03cfdd3bb185e4f8
--- /dev/null
+++ b/components/src/dipole.js
@@ -0,0 +1,52 @@
+	import * as THREE from 'three';
+
+	// Bending Dipole
+	export function dipole(length=1449) {
+		const dipoleMaster = new THREE.Object3D();
+
+		// main body
+		const loader = new THREE.TextureLoader();
+		const texture = loader.load('./components/dipole.png');
+		const textureTop = texture.clone();
+		const textureSide = texture.clone();
+		textureTop.center.set(0.5, 0.5);
+		textureTop.rotation = THREE.MathUtils.degToRad(90);
+		textureSide.offset.set(0, 0.8);
+		const dmaterial = new THREE.MeshLambertMaterial({map: texture});
+		const face = new THREE.MeshBasicMaterial({map: texture});
+		const faceTop = new THREE.MeshBasicMaterial({map: textureTop});
+		const faceSide = new THREE.MeshBasicMaterial({map: textureSide});
+		const materials = [face,face,faceTop,faceSide,faceSide,faceSide];
+		const d1geometry = new THREE.BoxGeometry(500, 700, length);
+		const d1mesh = new THREE.Mesh(d1geometry, materials);
+		d1mesh.position.set(100, 100, 0);
+		dipoleMaster.add(d1mesh);
+
+		// longitudinal coil
+		const dipoleCoil = new THREE.Object3D();
+		const coilmaterial = new THREE.MeshLambertMaterial({color: 0xc08000});
+		const d4geometry = new THREE.BoxGeometry(100, 100, length);
+		const d4mesh = new THREE.Mesh(d4geometry, coilmaterial);
+		d4mesh.position.set(-200, 0, 0);
+		dipoleCoil.add(d4mesh);
+
+		// cylinder coil front
+		const d2geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 1.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d2mesh = new THREE.Mesh(d2geometry, coilmaterial);
+		d2mesh.position.set(-100, 0, length/2);
+		dipoleCoil.add(d2mesh);
+
+		// cylinder coil back
+		const d3geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 0.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d3mesh = new THREE.Mesh(d3geometry, coilmaterial);
+		d3mesh.position.set(-100, 0, -length/2);
+		dipoleCoil.add(d3mesh);
+		dipoleCoil.position.set(0, 0, 0);
+		dipoleMaster.add(dipoleCoil);
+
+		// duplicate coil
+		const dipoleCoil2 = dipoleCoil.clone();
+		dipoleCoil2.position.set(0, 200, 0);
+		dipoleMaster.add(dipoleCoil2);
+		return dipoleMaster;
+	}
diff --git a/components/src/dipolebooster.js b/components/src/dipolebooster.js
new file mode 100644
index 0000000000000000000000000000000000000000..5422c7ddeef28cbf4eddf16b93803a34c970a227
--- /dev/null
+++ b/components/src/dipolebooster.js
@@ -0,0 +1,51 @@
+	import * as THREE from 'three';
+
+	// Bending Dipole booster
+	export function dipolebooster(length=1915) {
+		const dipoleContainer = new THREE.Object3D();
+		const dipoleMaster = new THREE.Object3D();
+
+		//texture
+		const loader = new THREE.TextureLoader();
+		const texture = loader.load('./components/dipole.png');
+		const textureTop = texture.clone();
+		const textureSide = texture.clone();
+		textureTop.center.set(0.5, 0.5);
+		textureTop.rotation = THREE.MathUtils.degToRad(90);
+		textureSide.offset.set(0, 0.8);
+		const dmaterial = new THREE.MeshLambertMaterial({map: texture});
+		const face = new THREE.MeshBasicMaterial({map: texture});
+		const faceTop = new THREE.MeshBasicMaterial({map: textureTop});
+		const faceSide = new THREE.MeshBasicMaterial({map: textureSide});
+		const materials = [face,face,faceTop,faceSide,faceSide,faceSide];
+		const d1geometry = new THREE.BoxGeometry(550, 400, length);
+		const d1mesh = new THREE.Mesh(d1geometry, materials);
+		d1mesh.position.set(-100, 100, 0);
+		dipoleMaster.add(d1mesh);	
+
+		//Coil
+		const dipoleCoil = new THREE.Object3D();
+		const coilmaterial = new THREE.MeshLambertMaterial({color: 0xc08000});
+		const d4geometry = new THREE.BoxGeometry(100, 100, length);
+		const d4mesh = new THREE.Mesh(d4geometry, coilmaterial);
+		d4mesh.position.set(-200, 0, 0);
+		dipoleCoil.add(d4mesh);
+		const d2geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 1.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d2mesh = new THREE.Mesh(d2geometry, coilmaterial);
+		d2mesh.position.set(-100, 0, length/2);
+		dipoleCoil.add(d2mesh);
+		const d3geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 0.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d3mesh = new THREE.Mesh(d3geometry, coilmaterial);
+		d3mesh.position.set(-100, 0, -length/2);
+		dipoleCoil.add(d3mesh);
+		dipoleCoil.position.set(0, 0, 0);
+		dipoleMaster.add(dipoleCoil);
+		const dipoleCoil2 = dipoleCoil.clone();
+		dipoleCoil2.position.set(0, 200, 0);
+		dipoleMaster.add(dipoleCoil2);
+
+		dipoleMaster.position.set(200, 0, 0);
+		dipoleContainer.add(dipoleMaster);
+
+		return dipoleContainer;
+	}
diff --git a/components/src/dipoleboosterfast.js b/components/src/dipoleboosterfast.js
new file mode 100644
index 0000000000000000000000000000000000000000..6c0fb913f87205980bd09787dd31907cb6bd2889
--- /dev/null
+++ b/components/src/dipoleboosterfast.js
@@ -0,0 +1,12 @@
+	import * as THREE from 'three';
+
+	// Bending Dipole
+	export function dipoleboosterfast(length=1915) {
+		const dipoleMaster = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0x009000});
+		const d1geometry = new THREE.BoxGeometry(550, 400, length);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		d1mesh.position.set(-100, 100, 0);
+		dipoleMaster.add(d1mesh);				
+		return dipoleMaster;
+	}
diff --git a/components/src/dipoleesrf.js b/components/src/dipoleesrf.js
new file mode 100644
index 0000000000000000000000000000000000000000..75129db9f426681e0035d567e0aca20656e811a1
--- /dev/null
+++ b/components/src/dipoleesrf.js
@@ -0,0 +1,31 @@
+	import * as THREE from 'three';
+
+	// Bending Dipole
+	export function dipoleesrf(length=2450) {
+		const dipoleMaster = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0x0000b0});
+		const d1geometry = new THREE.BoxGeometry(500, 700, length);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		d1mesh.position.set(100, 100, 0);
+		dipoleMaster.add(d1mesh);				
+		const dipoleCoil = new THREE.Object3D();
+		const coilmaterial = new THREE.MeshLambertMaterial({color: 0xc08000});
+		const d4geometry = new THREE.BoxGeometry(100, 100, length);
+		const d4mesh = new THREE.Mesh(d4geometry, coilmaterial);
+		d4mesh.position.set(-200, 0, 0);
+		dipoleCoil.add(d4mesh);
+		const d2geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 1.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d2mesh = new THREE.Mesh(d2geometry, coilmaterial);
+		d2mesh.position.set(-100, 0, length/2);
+		dipoleCoil.add(d2mesh);
+		const d3geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 0.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d3mesh = new THREE.Mesh(d3geometry, coilmaterial);
+		d3mesh.position.set(-100, 0, -length/2);
+		dipoleCoil.add(d3mesh);
+		dipoleCoil.position.set(0, 0, 0);
+		dipoleMaster.add(dipoleCoil);
+		const dipoleCoil2 = dipoleCoil.clone();
+		dipoleCoil2.position.set(0, 200, 0);
+		dipoleMaster.add(dipoleCoil2);
+		return dipoleMaster;
+	}
diff --git a/components/src/dipolefast.js b/components/src/dipolefast.js
new file mode 100644
index 0000000000000000000000000000000000000000..dbe716b1c8072f28a3b02fa28e4381e285c16b23
--- /dev/null
+++ b/components/src/dipolefast.js
@@ -0,0 +1,31 @@
+	import * as THREE from 'three';
+
+	// Bending Dipole
+	export function dipolefast(length=1400) {
+		const dipoleMaster = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0x00c000});
+		const d1geometry = new THREE.BoxGeometry(500, 700, length);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		d1mesh.position.set(100, 100, 0);
+		dipoleMaster.add(d1mesh);				
+		const dipoleCoil = new THREE.Object3D();
+		const coilmaterial = new THREE.MeshLambertMaterial({color: 0xc08000});
+		const d4geometry = new THREE.BoxGeometry(100, 100, length);
+		const d4mesh = new THREE.Mesh(d4geometry, coilmaterial);
+		d4mesh.position.set(-200, 0, 0);
+		dipoleCoil.add(d4mesh);
+		const d2geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 1.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d2mesh = new THREE.Mesh(d2geometry, coilmaterial);
+		d2mesh.position.set(-100, 0, length/2);
+		dipoleCoil.add(d2mesh);
+		const d3geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 0.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d3mesh = new THREE.Mesh(d3geometry, coilmaterial);
+		d3mesh.position.set(-100, 0, -length/2);
+		dipoleCoil.add(d3mesh);
+		dipoleCoil.position.set(0, 0, 0);
+		dipoleMaster.add(dipoleCoil);
+		const dipoleCoil2 = dipoleCoil.clone();
+		dipoleCoil2.position.set(0, 200, 0);
+		dipoleMaster.add(dipoleCoil2);
+		return dipoleMaster;
+	}
diff --git a/components/src/dipolefermi.js b/components/src/dipolefermi.js
new file mode 100644
index 0000000000000000000000000000000000000000..420d541846e05f8526538dc52daf92e991137f7c
--- /dev/null
+++ b/components/src/dipolefermi.js
@@ -0,0 +1,54 @@
+	import * as THREE from 'three';
+
+	// Bending Dipole booster
+	export function dipolefermi(length=500) {
+		const dipoleContainer = new THREE.Object3D();
+		const dipoleMaster = new THREE.Object3D();
+
+		//texture
+		const loader = new THREE.TextureLoader();
+		const texture = loader.load('./components/dipole.png');
+		const textureTop = texture.clone();
+		const textureSide = texture.clone();
+		textureTop.center.set(0.5, 0.5);
+		textureTop.rotation = THREE.MathUtils.degToRad(90);
+		textureSide.offset.set(0, 0.8);
+		const dmaterial = new THREE.MeshLambertMaterial({map: texture});
+		const face = new THREE.MeshBasicMaterial({map: texture});
+		const faceTop = new THREE.MeshBasicMaterial({map: textureTop});
+		const faceSide = new THREE.MeshBasicMaterial({map: textureSide});
+		const materials = [face,face,faceTop,faceSide,faceSide,faceSide];
+		const d1geometry = new THREE.BoxGeometry(550, 400, length);
+		const d1mesh = new THREE.Mesh(d1geometry, materials);
+		d1mesh.position.set(-100, 100, 0);
+		dipoleMaster.add(d1mesh);	
+
+		//Coil
+		const dipoleCoil = new THREE.Object3D();
+		const coilmaterial = new THREE.MeshLambertMaterial({color: 0xc08000});
+		const d4geometry = new THREE.BoxGeometry(100, 100, length);
+		const d4mesh = new THREE.Mesh(d4geometry, coilmaterial);
+		d4mesh.position.set(-200, 0, 0);
+		dipoleCoil.add(d4mesh);
+		const d2geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 1.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d2mesh = new THREE.Mesh(d2geometry, coilmaterial);
+		d2mesh.position.set(-100, 0, length/2);
+		dipoleCoil.add(d2mesh);
+		const d3geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 0.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d3mesh = new THREE.Mesh(d3geometry, coilmaterial);
+		d3mesh.position.set(-100, 0, -length/2);
+		dipoleCoil.add(d3mesh);
+		dipoleCoil.position.set(0, 0, 0);
+		dipoleMaster.add(dipoleCoil);
+		const dipoleCoil2 = dipoleCoil.clone();
+		dipoleCoil2.position.set(0, 200, 0);
+		dipoleMaster.add(dipoleCoil2);
+
+		dipoleMaster.position.set(200, 0, 0);
+		dipoleContainer.add(dipoleMaster);
+
+		return dipoleContainer;
+	}		
+		
+		
+
diff --git a/components/src/dipoleplus.js b/components/src/dipoleplus.js
new file mode 100644
index 0000000000000000000000000000000000000000..cc0effd1b9a35836457c5f2ea229ac21fe5fbfae
--- /dev/null
+++ b/components/src/dipoleplus.js
@@ -0,0 +1,53 @@
+	import * as THREE from 'three';
+	import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
+
+	// Bending Dipole
+	export function dipole(length=1449) {
+		const dipoleMaster = new THREE.Object3D();
+
+		// main body
+		const loader = new THREE.TextureLoader();
+		const texture = loader.load('./components/dipole.png');
+		const textureTop = texture.clone();
+		const textureSide = texture.clone();
+		textureTop.center.set(0.5, 0.5);
+		textureTop.rotation = THREE.MathUtils.degToRad(90);
+		textureSide.offset.set(0, 0.8);
+		const dmaterial = new THREE.MeshLambertMaterial({map: texture});
+		const face = new THREE.MeshBasicMaterial({map: texture});
+		const faceTop = new THREE.MeshBasicMaterial({map: textureTop});
+		const faceSide = new THREE.MeshBasicMaterial({map: textureSide});
+		const materials = [face,face,faceTop,faceSide,faceSide,faceSide];
+		const d1geometry = new RoundedBoxGeometry(500, 700, length, 30, 3);
+		const d1mesh = new THREE.Mesh(d1geometry, materials);
+		d1mesh.position.set(100, 100, 0);
+		dipoleMaster.add(d1mesh);
+
+		// longitudinal coil
+		const dipoleCoil = new THREE.Object3D();
+		const coilmaterial = new THREE.MeshLambertMaterial({color: 0xc08000});
+		const d4geometry = new THREE.BoxGeometry(100, 100, length);
+		const d4mesh = new THREE.Mesh(d4geometry, coilmaterial);
+		d4mesh.position.set(-200, 0, 0);
+		dipoleCoil.add(d4mesh);
+
+		// cylinder coil front
+		const d2geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 1.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d2mesh = new THREE.Mesh(d2geometry, coilmaterial);
+		d2mesh.position.set(-100, 0, length/2);
+		dipoleCoil.add(d2mesh);
+
+		// cylinder coil back
+		const d3geometry = new THREE.CylinderGeometry(150 /*radiusTop*/, 150 /*radiusBottom*/, 100 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,Math.PI * 0.5 /*thetaStart*/, Math.PI * 1 /*thetaLength*/);
+		const d3mesh = new THREE.Mesh(d3geometry, coilmaterial);
+		d3mesh.position.set(-100, 0, -length/2);
+		dipoleCoil.add(d3mesh);
+		dipoleCoil.position.set(0, 0, 0);
+		dipoleMaster.add(dipoleCoil);
+
+		// duplicate coil
+		const dipoleCoil2 = dipoleCoil.clone();
+		dipoleCoil2.position.set(0, 200, 0);
+		dipoleMaster.add(dipoleCoil2);
+		return dipoleMaster;
+	}
diff --git a/components/src/ellipticaltube.js b/components/src/ellipticaltube.js
new file mode 100644
index 0000000000000000000000000000000000000000..76f6fcc3e01b0f6dd49341587b43054a010f0954
--- /dev/null
+++ b/components/src/ellipticaltube.js
@@ -0,0 +1,53 @@
+// jshint esversion: 6
+	import * as THREE from 'three';
+
+	// a tube among two ellipses laying in 2 parallel planes at distance 'height'
+	export function ellipticaltubeGeometry(x1Radius, y1Radius, x2Radius, y2Radius, height, numPoints=16) {
+		const egeometry = new THREE.BufferGeometry();
+		const ellipse1 = new THREE.EllipseCurve(
+			0,  0,            // ax, aY
+			x1Radius, y1Radius,
+			0,  2 * Math.PI,  // aStartAngle, aEndAngle
+			false,            // aClockwise
+			0                 // aRotation
+		);
+		const points1 = ellipse1.getPoints(numPoints);
+		const ellipse2 = new THREE.EllipseCurve(
+			0,  0,            // ax, aY
+			x2Radius, y2Radius,
+			0,  2 * Math.PI,  // aStartAngle, aEndAngle
+			false,            // aClockwise
+			0                // aRotation
+		);
+
+		const points2 = ellipse2.getPoints(numPoints);
+		// console.log('points1', points1);
+		const vertices3d = new Float32Array(numPoints*18);
+		let j;
+		for (let i=0; i<numPoints; i++) {
+			j = (i + 1) % numPoints;
+			// first face
+			vertices3d[i*18+0] = points1[i].x;
+			vertices3d[i*18+1] = points1[i].y;
+			vertices3d[i*18+2] = 0;
+			vertices3d[i*18+3] = points2[i].x;
+			vertices3d[i*18+4] = points2[i].y;
+			vertices3d[i*18+5] = height;
+			vertices3d[i*18+6] = points1[j].x;
+			vertices3d[i*18+7] = points1[j].y;
+			vertices3d[i*18+8] = 0;
+			// second face
+			vertices3d[i*18+9] = points2[i].x;
+			vertices3d[i*18+10] = points2[i].y;
+			vertices3d[i*18+11] = height;
+			vertices3d[i*18+12] = points2[j].x;
+			vertices3d[i*18+13] = points2[j].y;
+			vertices3d[i*18+14] = height;
+			vertices3d[i*18+15] = points1[j].x;
+			vertices3d[i*18+16] = points1[j].y;
+			vertices3d[i*18+17] = 0;
+		}
+		egeometry.setAttribute('position', new THREE.BufferAttribute(vertices3d, 3));
+		egeometry.height = height;
+		return egeometry;
+	}
diff --git a/components/src/flsc.js b/components/src/flsc.js
new file mode 100644
index 0000000000000000000000000000000000000000..f1b4220a1d560405b91f6c77f8554f201c4c516e
--- /dev/null
+++ b/components/src/flsc.js
@@ -0,0 +1,132 @@
+// jshint esversion: 6
+	import * as THREE from 'three';
+
+	// flsc
+	export function flsc(length=700) {
+		const flscSR = new THREE.Object3D();
+		const flscContiner = new THREE.Object3D();
+		const materialGrey = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		
+		
+		const d1geometry = new THREE.CylinderGeometry(25, 25, 500, 25);
+		const d1mesh = new THREE.Mesh(d1geometry, materialGrey);
+		flscContiner.add(d1mesh);				
+		flscContiner.rotateX(Math.PI * 1);
+			
+		// esagono
+		const d2geometry = new THREE.CylinderGeometry(70, 70, 100, 6);
+		const d2mesh = new THREE.Mesh(d2geometry, materialGrey);
+		d2mesh.position.set(0, 290, 0);
+		d2mesh.rotateX(Math.PI * 1);
+		d2mesh.rotateY(Math.PI * 1);
+		d2mesh.rotateZ(Math.PI * 1.5);		
+		flscContiner.add(d2mesh);
+		
+		// cil1 sotto
+		const d3geometry = new THREE.CylinderGeometry(90, 90, 20, 15);
+		const d3mesh = new THREE.Mesh(d3geometry, materialGrey);
+		d3mesh.rotateX(Math.PI * 1);
+		d3mesh.rotateY(Math.PI * 1);
+		d3mesh.rotateZ(Math.PI * 1);
+		d3mesh.position.set(0, 140 , 0);			
+		flscContiner.add(d3mesh);		
+		
+		// zigrinatura
+		const d4geometry = new THREE.CylinderGeometry(70, 70, 120, 15);
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/flsc_texture.png');	
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(5, 40);		
+		const material = new THREE.MeshBasicMaterial({ map: texture });		
+		const d4mesh = new THREE.Mesh(d4geometry, material);
+		d4mesh.rotateX(Math.PI * 1);
+		d4mesh.rotateY(Math.PI * 1);
+		d4mesh.rotateZ(Math.PI * 1);
+		d4mesh.position.set(0, 80 , 0);			
+		flscContiner.add(d4mesh);		
+		
+		// cil2 sopra
+		const d5geometry = new THREE.CylinderGeometry(90, 90, 20, 15);
+		const d5mesh = new THREE.Mesh(d5geometry, materialGrey);
+		d5mesh.rotateX(Math.PI * 1);
+		d5mesh.rotateY(Math.PI * 1);
+		d5mesh.rotateZ(Math.PI * 1);
+		d5mesh.position.set(0, 10 , 0);			
+		flscContiner.add(d5mesh);						
+		
+		// cil3
+		const dmateria6 = new THREE.MeshLambertMaterial({color: 0x000000});
+		const d6geometry = new THREE.CylinderGeometry(50, 50, 60, 15);
+		const d6mesh = new THREE.Mesh(d6geometry, dmateria6);
+		d6mesh.rotateX(Math.PI * 1);
+		d6mesh.rotateY(Math.PI * 1);
+		d6mesh.rotateZ(Math.PI * 1);
+		d6mesh.position.set(0, -30 , 0);			
+		flscContiner.add(d6mesh);		
+		
+		// box grigio
+		const d7geometry = new THREE.BoxGeometry(100, 100, 100);
+		const dmaterial7= new THREE.MeshLambertMaterial({color: 0x405040});
+		const d7mesh = new THREE.Mesh(d7geometry, dmaterial7);
+		d7mesh.position.set(0, -110, 0);		
+		flscContiner.add(d7mesh);				
+		
+		// box contenitore arancio sotto
+		const d8geometry = new THREE.BoxGeometry(120, 10, 120);
+		const d8mesh = new THREE.Mesh(d8geometry, materialGrey);
+		d8mesh.position.set(0, -160, 0);		
+		flscContiner.add(d8mesh);				
+				
+		// box arancio
+		const d9geometry = new THREE.BoxGeometry(100, 120, 100);
+		const dmaterial9= new THREE.MeshLambertMaterial({color: 0xffA500});
+		const d9mesh = new THREE.Mesh(d9geometry, dmaterial9);
+		d9mesh.position.set(0, -220, 0);		
+		flscContiner.add(d9mesh);	
+		
+		// box contenitore arancio sopra
+		const d10geometry = new THREE.BoxGeometry(120, 10, 120);
+		const d10mesh = new THREE.Mesh(d10geometry, materialGrey);
+		d10mesh.position.set(0, -280, 0);		
+		flscContiner.add(d10mesh);	
+		
+		//cilindro supporto
+		const d11geometry = new THREE.CylinderGeometry(25, 25, 400, 25);
+		const d11mesh = new THREE.Mesh(d11geometry, materialGrey);
+		d11mesh.position.set(0, -120, -115);
+		flscContiner.add(d11mesh);				
+	
+		//cilindro supporto blu
+		const materialBlue = new THREE.MeshLambertMaterial({color: 0x0000ff});
+		const d12geometry = new THREE.CylinderGeometry(35, 35, 100, 25);
+		const d12mesh = new THREE.Mesh(d12geometry, materialBlue);
+		d12mesh.position.set(0, -220, -115);
+		flscContiner.add(d12mesh);
+		
+		//cilindro supporto2
+		const d13geometry = new THREE.CylinderGeometry(25, 25, 400, 25);
+		const d13mesh = new THREE.Mesh(d13geometry, materialGrey);
+		d13mesh.position.set(0, -120, 115);
+		flscContiner.add(d13mesh);				
+	
+		//cilindro supporto blu2
+		const d14geometry = new THREE.CylinderGeometry(35, 35, 100, 25);
+		const d14mesh = new THREE.Mesh(d14geometry, materialBlue);
+		d14mesh.position.set(0, -220, 115);
+		flscContiner.add(d14mesh);	
+		
+		// blocco supporto
+		const dmaterial15 = new THREE.MeshLambertMaterial({color: 0xc0c0c0});
+		const d15geometry = new THREE.CylinderGeometry(10 /*radiusTop*/, 10 /*radiusBottom*/, 250 /*height*/, 20 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,0 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const d15mesh = new THREE.Mesh(d15geometry, dmaterial15);
+		d15mesh.position.set(0, -110, 0);
+		d15mesh.rotateX(Math.PI * 0.5);
+		d15mesh.scale.setX(2);
+		d15mesh.rotatedX = true;		
+		flscContiner.add(d15mesh);				
+
+		flscContiner.position.set(0, 280, 0);
+		flscSR.add(flscContiner);
+		flscSR.rotateY(Math.PI * -0.5);
+		return flscSR;
+	}
diff --git a/components/src/flsc.svg b/components/src/flsc.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bbe875721cb51365f8a6b027508699c236e24450
--- /dev/null
+++ b/components/src/flsc.svg
@@ -0,0 +1,19 @@
+<svg viewBox="0 0 300px 610px" xmlns="http://www.w3.org/2000/svg"  xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="translate(500 1110) rotate(180) scale(2)">
+		<rect x="134" y="420" width="10" height="30" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<rect x="120" y="384" width="40" height="30" stroke="#2f2f2f" stroke-width="3" fill="#c7c7c7" />
+		<line x1="120" y1="388" x2="160" y2="388" stroke="black" stroke-width="1px" />  
+		<line x1="120" y1="392" x2="160" y2="392" stroke="black" stroke-width="1px" /> 
+		<line x1="120" y1="396" x2="160" y2="396" stroke="black" stroke-width="1px" /> 
+		<line x1="120" y1="400" x2="160" y2="400" stroke="black" stroke-width="1px" /> 
+		<line x1="120" y1="404" x2="160" y2="404" stroke="black" stroke-width="1px" /> 
+		<line x1="120" y1="408" x2="160" y2="408" stroke="black" stroke-width="1px" /> 
+		<rect x="125" y="351" width="30" height="30" stroke="#2f2f2f" stroke-width="3" fill="#2f2f2f" />
+		<line x1="110" y1="328" x2="170" y2="328" stroke="#c7c7c7" stroke-width="15px" />
+		<rect x="120" y="305" width="40" height="50" stroke="#2f2f2f" stroke-width="3" fill="#5f5f5f" />
+		<rect x="122" y="270" width="35" height="35" stroke="#2f2f2f" stroke-width="3" fill="orange" />
+		<rect x="100" y="264" width="10" height="130" stroke="#2f2f2f" stroke-width="3" fill="#c7c7c7" />
+		<rect x="170" y="264" width="10" height="130" stroke="#2f2f2f" stroke-width="3" fill="#c7c7c7" />
+		<circle r="20" cx="140" cy="450" fill="#c7c7c7" stroke="#2f2f2f" stroke-width="3px" />
+	</g>
+</svg>
diff --git a/components/src/flscfast.js b/components/src/flscfast.js
new file mode 100644
index 0000000000000000000000000000000000000000..5092a427cee2b6f581f520ec53b4b0d3eb2ff55f
--- /dev/null
+++ b/components/src/flscfast.js
@@ -0,0 +1,58 @@
+// jshint esversion: 6
+	import * as THREE from 'three';
+
+	// flsc
+	export function flscfast(length=700) {
+		const flscSR = new THREE.Object3D();
+		const flscContiner = new THREE.Object3D();
+		const materialGrey = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		
+		
+		const d1geometry = new THREE.CylinderGeometry(25, 25, 500, 15);
+		const d1mesh = new THREE.Mesh(d1geometry, materialGrey);
+		flscContiner.add(d1mesh);				
+		flscContiner.rotateX(Math.PI * 1);
+		
+		// zigrinatura
+		const d4geometry = new THREE.CylinderGeometry(70, 70, 160, 20);
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/flsc_texture.png');	
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(5, 40);		
+		const material = new THREE.MeshBasicMaterial({ map: texture });		
+		const d4mesh = new THREE.Mesh(d4geometry, material);
+		d4mesh.rotateX(Math.PI * 1);
+		d4mesh.rotateY(Math.PI * 1);
+		d4mesh.rotateZ(Math.PI * 1);
+		d4mesh.position.set(0, 80 , 0);			
+		flscContiner.add(d4mesh);		
+		
+		// cil3
+		const dmateria6 = new THREE.MeshLambertMaterial({color: 0x000000});
+		const d6geometry = new THREE.CylinderGeometry(50, 50, 60, 15);
+		const d6mesh = new THREE.Mesh(d6geometry, dmateria6);
+		d6mesh.rotateX(Math.PI * 1);
+		d6mesh.rotateY(Math.PI * 1);
+		d6mesh.rotateZ(Math.PI * 1);
+		d6mesh.position.set(0, -30 , 0);			
+		flscContiner.add(d6mesh);		
+		
+		// box gray
+		const d7geometry = new THREE.BoxGeometry(100, 100, 100);
+		const dmaterial7= new THREE.MeshLambertMaterial({color: 0x405040});
+		const d7mesh = new THREE.Mesh(d7geometry, dmaterial7);
+		d7mesh.position.set(0, -110, 0);		
+		flscContiner.add(d7mesh);				
+				
+		// box orange
+		const d9geometry = new THREE.BoxGeometry(100, 120, 100);
+		const dmaterial9= new THREE.MeshLambertMaterial({color: 0xffA500});
+		const d9mesh = new THREE.Mesh(d9geometry, dmaterial9);
+		d9mesh.position.set(0, -220, 0);		
+		flscContiner.add(d9mesh);	
+
+		flscContiner.position.set(0, 280, 0);
+		flscSR.add(flscContiner);
+		flscSR.rotateY(Math.PI * -0.5);
+		return flscSR;
+	}
\ No newline at end of file
diff --git a/components/src/fug.js b/components/src/fug.js
new file mode 100644
index 0000000000000000000000000000000000000000..b2200a3e3c275d841ac5e9aabd419cdcc30876ba
--- /dev/null
+++ b/components/src/fug.js
@@ -0,0 +1,253 @@
+	import * as THREE from 'three';
+	import {FontLoader} from 'three/addons/loaders/FontLoader.js';
+	import {TextGeometry} from 'three/addons/geometries/TextGeometry.js';
+
+	// fug rack
+	export function fug(width=800, height=1700, depth=800) {
+		const text = 'Fug';
+		const fugObject = new THREE.Object3D();
+		let group, textMesh, textGeo, materials;
+		let size = 60;
+		let textheight = 10;
+		let pos = [];
+		let rot = [];
+		const hover = 30;
+		const curveSegments = 8;
+		let font;
+		function insertText(isize, ipos, irot) {
+			group = new THREE.Group();
+			group.position.y = 100;
+			fugObject.add( group );
+			size = isize;
+			pos = ipos;
+			rot = irot;
+			loadFont();
+		}
+		function loadFont() {
+			const loader = new FontLoader();
+			// https://threejs.org/examples/fonts/droid_sans_bold.typeface.json
+			loader.load( './fonts/droid_sans_bold.typeface.json', function ( response ) {
+				font = response;
+				refreshText();
+			} );
+		}
+		materials = [
+			new THREE.MeshPhongMaterial( { color: 0x272c7d  , flatShading: true } ), // front
+			new THREE.MeshPhongMaterial( { color: 0x272c7d  } ) // side
+		];
+		function createText() {
+			textGeo = new TextGeometry(text.replace('TKLY_KG','K').replace('.01',''), {font: font, size: size, height: textheight, curveSegments: curveSegments});
+			textGeo.computeBoundingBox();
+			const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+			textMesh = new THREE.Mesh( textGeo, materials );
+			textMesh.position.x = pos[0];
+			textMesh.position.y = pos[1];
+			textMesh.position.z = pos[2];
+			textMesh.rotation.x = rot[0];
+			textMesh.rotation.y = rot[1];
+			textMesh.rotation.z = rot[2];
+			group.add( textMesh );
+		}
+		function refreshText() {
+			group.remove( textMesh );
+			if ( ! text ) return;
+			createText();
+		}
+		insertText(270, [-650,-1500,-720], [0, -Math.PI / 2, 0]);
+	
+		
+		
+		const materialGreyDark= new THREE.MeshLambertMaterial({color: 0x9d9d9d});
+		const materialVeryGreyDark= new THREE.MeshLambertMaterial({color: 0x242424});
+		const silvermaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const testmaterial = new THREE.MeshLambertMaterial({color: 0x00ff00});
+		const greenmaterial = new THREE.MeshLambertMaterial({color: 0x095c23});
+		const greenmaterial2 = new THREE.MeshLambertMaterial({color: 0x0f993b});
+		const redmaterial = new THREE.MeshLambertMaterial({color: 0xab0000});
+		const yellowmaterial = new THREE.MeshLambertMaterial({color: 0xcc9d02});
+		const emergencymaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
+		const blumaterial = new THREE.MeshLambertMaterial({color: 0x272c7d});
+		const whiteaterial = new THREE.MeshLambertMaterial({color: 0xdfdfe8});
+
+		//fix FUG logo
+		const fugfixgeometry = new THREE.BoxGeometry(10, 50, 460);
+		const fugfixgeometrymesh = new THREE.Mesh(fugfixgeometry, blumaterial);
+		fugfixgeometrymesh.position.set(-655,-1157,-310);
+		fugObject.add(fugfixgeometrymesh);	
+		
+		//left rack
+		const lrgeometry = new THREE.BoxGeometry(800, 1700, 600);
+		const lrmesh = new THREE.Mesh(lrgeometry, silvermaterial);
+		lrmesh.position.set(0 , 0 , -100);
+		fugObject.add(lrmesh);
+		
+		//right rack
+		const rrgeometry = new THREE.BoxGeometry(800, 1700, 600);
+		const rrmesh = new THREE.Mesh(rrgeometry, silvermaterial);
+		rrmesh.position.set( 0, 0 , -710);
+		fugObject.add(rrmesh);		
+		
+		//basefug
+		const basegeometry = new THREE.BoxGeometry(1050, 900, 1200);
+		const basemesh = new THREE.Mesh(basegeometry, silvermaterial);
+		basemesh.position.set( -130, -1320 , -400);
+		fugObject.add(basemesh);			
+		
+		//edge lle		
+		const llegeometry = new THREE.BoxGeometry(50, 1700, 50);
+		const llemesh = new THREE.Mesh(llegeometry, materialGreyDark);
+		llemesh.position.set( -425, 0 , -985);
+		fugObject.add(llemesh);
+		
+		//edge lre		
+		const lregeometry = new THREE.BoxGeometry(50, 1700, 50);
+		const lremesh = new THREE.Mesh(lregeometry, materialGreyDark);
+		lremesh.position.set( -425, 0 , -430);
+		fugObject.add(lremesh);		
+
+		//edge rle		
+		const rlegeometry = new THREE.BoxGeometry(50, 1700, 50);
+		const rlemesh = new THREE.Mesh(rlegeometry, materialGreyDark);
+		rlemesh.position.set( -425, 0 , -370);
+		fugObject.add(rlemesh);	
+		
+		//edge rre		
+		const rregeometry = new THREE.BoxGeometry(50, 1700, 50);
+		const rremesh = new THREE.Mesh(rregeometry, materialGreyDark);
+		rremesh.position.set( -425, 0 , 175);
+		fugObject.add(rremesh);		
+		
+		//edge lue		
+		const luegeometry = new THREE.BoxGeometry(50, 50, 505);
+		const luemesh = new THREE.Mesh(luegeometry, materialGreyDark);
+		luemesh.position.set( -425, 825 , -707);
+		fugObject.add(luemesh);		
+
+		//edge lde		
+		const ldegeometry = new THREE.BoxGeometry(50, 50, 505);
+		const ldemesh = new THREE.Mesh(ldegeometry, materialGreyDark);
+		ldemesh.position.set( -425, -830 , -707);
+		fugObject.add(ldemesh);				
+
+		//edge rue		
+		const ruegeometry = new THREE.BoxGeometry(50, 50, 505);
+		const ruemesh = new THREE.Mesh(ruegeometry, materialGreyDark);
+		ruemesh.position.set( -425, 825 , -100);
+		fugObject.add(ruemesh);			
+		
+		//edge rde		
+		const rdegeometry = new THREE.BoxGeometry(50, 50, 505);
+		const rdemesh = new THREE.Mesh(rdegeometry, materialGreyDark);
+		rdemesh.position.set( -425, -825 , -100);
+		fugObject.add(rdemesh);	
+		
+		//GreenButton
+		const greenbutton = new THREE.CylinderGeometry(55, 55, 40, 15);
+		const greenbuttonmesh = new THREE.Mesh(greenbutton, greenmaterial);
+		greenbuttonmesh.rotateX(Math.PI * 0.5);
+		greenbuttonmesh.rotateY(Math.PI * 1);
+		greenbuttonmesh.rotateZ(Math.PI * 0.5);
+		greenbuttonmesh.position.set(-400, 600 , -670);		
+		fugObject.add(greenbuttonmesh);		
+		
+		//GreenLed
+		const greenled = new THREE.CylinderGeometry(40, 40, 40, 15);
+		const greenledmesh = new THREE.Mesh(greenled, greenmaterial2);
+		greenledmesh.rotateX(Math.PI * 0.5);
+		greenledmesh.rotateY(Math.PI * 1);
+		greenledmesh.rotateZ(Math.PI * 0.5);
+		greenledmesh.position.set(-400, 600 , -550);		
+		fugObject.add(greenledmesh);			
+
+		//RedButton
+		const redbutton = new THREE.CylinderGeometry(55, 55, 40, 15);
+		const redbuttonmesh = new THREE.Mesh(redbutton, redmaterial);
+		redbuttonmesh.rotateX(Math.PI * 0.5);
+		redbuttonmesh.rotateY(Math.PI * 1);
+		redbuttonmesh.rotateZ(Math.PI * 0.5);
+		redbuttonmesh.position.set(-400, 450 , -670);		
+		fugObject.add(redbuttonmesh);			
+
+		//YelloyLed
+		const yellowled = new THREE.CylinderGeometry(40, 40, 40, 15);
+		const yellowledmesh = new THREE.Mesh(yellowled, yellowmaterial);
+		yellowledmesh.rotateX(Math.PI * 0.5);
+		yellowledmesh.rotateY(Math.PI * 1);
+		yellowledmesh.rotateZ(Math.PI * 0.5);
+		yellowledmesh.position.set(-400, 450 , -550);		
+		fugObject.add(yellowledmesh);	
+		
+		//EmergenctButton
+		const emergencybutton = new THREE.CylinderGeometry(80, 80, 40, 15);
+		const emergencybuttonmesh = new THREE.Mesh(emergencybutton, emergencymaterial);
+		emergencybuttonmesh.rotateX(Math.PI * 0.5);
+		emergencybuttonmesh.rotateY(Math.PI * 1);
+		emergencybuttonmesh.rotateZ(Math.PI * 0.5);
+		emergencybuttonmesh.position.set(-400, 270 , -620);		
+		fugObject.add(emergencybuttonmesh);	
+		
+		//display up		
+		const displayupgeometry = new THREE.BoxGeometry(50, 50, 150);
+		const displayupgeometrymesh = new THREE.Mesh(displayupgeometry, materialVeryGreyDark);
+		displayupgeometrymesh.position.set( -400, 600 , -850);
+		fugObject.add(displayupgeometrymesh);			
+		
+		//display2 down		
+		const displayupgeometry2 = new THREE.BoxGeometry(50, 50, 150);
+		const displayupgeometrymesh2 = new THREE.Mesh(displayupgeometry2, materialVeryGreyDark);
+		displayupgeometrymesh2.position.set( -400, 500 , -850);
+		fugObject.add(displayupgeometrymesh2);	
+		
+		//switch		
+		const switchgeometry = new THREE.BoxGeometry(10, 350, 200);
+		const switchgeometrymesh = new THREE.Mesh(switchgeometry, materialVeryGreyDark);
+		switchgeometrymesh.position.set( -400, -50 , -850);
+		fugObject.add(switchgeometrymesh);	
+		
+		
+		//Lgrid2 down	
+		const grid2geometry = new THREE.BoxGeometry(10, 200, 520);
+		const textureLoader2 = new THREE.TextureLoader();
+		const texture2 = textureLoader2.load('./components/grid_texture.png');	
+		texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
+		texture2.repeat.set(50, 1);		
+		const material2 = new THREE.MeshBasicMaterial({ map: texture2 });		
+		const grid2geometrymesh = new THREE.Mesh(grid2geometry, material2);
+		grid2geometrymesh.rotateX(Math.PI * 1);
+		grid2geometrymesh.rotateY(Math.PI * 1);
+		grid2geometrymesh.rotateZ(Math.PI * 1);
+		grid2geometrymesh.position.set( -400, -650 , -710);
+		fugObject.add(grid2geometrymesh);	
+
+		
+		//Rgrid2 down	
+		const grid4geometry = new THREE.BoxGeometry(10, 200, 520);
+		const textureLoader4 = new THREE.TextureLoader();
+		const texture4 = textureLoader4.load('./components/grid_texture.png');	
+		texture4.wrapS = texture4.wrapT = THREE.RepeatWrapping;
+		texture4.repeat.set(50, 1);		
+		const material4 = new THREE.MeshBasicMaterial({ map: texture2 });		
+		const grid4geometrymesh = new THREE.Mesh(grid4geometry, material2);
+		grid4geometrymesh.rotateX(Math.PI * 1);
+		grid4geometrymesh.rotateY(Math.PI * 1);
+		grid4geometrymesh.rotateZ(Math.PI * 1);
+		grid4geometrymesh.position.set( -400, -650 , -130);
+		fugObject.add(grid4geometrymesh);	
+		
+		//drawer1		
+		const drawer1geometry = new THREE.BoxGeometry(10, 220, 500);
+		const drawer1geometrytrymesh = new THREE.Mesh(drawer1geometry, whiteaterial);
+		drawer1geometrytrymesh.position.set( -400, 650 , -100);
+		fugObject.add(drawer1geometrytrymesh);			
+		
+		//drawer2		
+		const drawer2geometry = new THREE.BoxGeometry(10, 220, 500);
+		const drawer2geometrytrymesh = new THREE.Mesh(drawer2geometry, whiteaterial);
+		drawer2geometrytrymesh.position.set( -400, 400 , -100);
+		fugObject.add(drawer2geometrytrymesh);	
+		
+
+		
+		
+		return fugObject;
+	}
diff --git a/components/src/gun.js b/components/src/gun.js
new file mode 100644
index 0000000000000000000000000000000000000000..6a71bb38d28d96467c50bd298cd1ab561f51dfde
--- /dev/null
+++ b/components/src/gun.js
@@ -0,0 +1,11 @@
+	import * as THREE from 'three';
+
+	// gun rack
+	export function gun(width=800, height=2000, depth=800) {
+		const gunObject = new THREE.Object3D();
+		const gunmaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const gungeometry = new THREE.BoxGeometry(width, height, depth);
+		const gunmesh = new THREE.Mesh(gungeometry, gunmaterial);
+		gunObject.add(gunmesh);
+		return gunObject;
+	}
diff --git a/components/src/gun.svg b/components/src/gun.svg
new file mode 100644
index 0000000000000000000000000000000000000000..88cbccc36cfa8a8c5c9ef033bbd02bf41f478f97
--- /dev/null
+++ b/components/src/gun.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 400px 210px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2)">
+		<rect x="50" y="50" width="110" height="110" rx="10" ry="10" fill="#999999" stroke="darkslategrey" stroke-width="5"/>
+		<text x="105" y="135" text-anchor="middle" font-family="Arial" font-size="90" fill="white" width="2">G</text>
+	</g>
+</svg>
diff --git a/components/src/kicker.js b/components/src/kicker.js
new file mode 100644
index 0000000000000000000000000000000000000000..69bba93f63f49baca9f6d294f3f74dbc82f6af33
--- /dev/null
+++ b/components/src/kicker.js
@@ -0,0 +1,44 @@
+	import * as THREE from 'three';
+
+	// kicker
+	export function kicker(length=300) {
+		const kickerMaster = new THREE.Object3D();
+
+		const d1geometry = new THREE.BoxGeometry(710, 500, 500);
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0x405040});
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		d1mesh.position.set(0, -20, 330);
+		kickerMaster.add(d1mesh);				
+
+		//add quad2
+		const d2geometry = new THREE.BoxGeometry(710, 270, 300);
+		const dmaterial2= new THREE.MeshLambertMaterial({color: 0x405040});
+		const d2mesh = new THREE.Mesh(d2geometry, dmaterial2);
+		d2mesh.position.set(0, -135, 80);
+		kickerMaster.add(d2mesh);
+
+		//add sest
+		const d3geometry = new THREE.CylinderGeometry(300, 300, 700, 6);
+		const dmateria3 = new THREE.MeshLambertMaterial({color: 0xffff00});
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/kicker_texture.png');
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(5, 40);
+		const material = new THREE.MeshBasicMaterial({ map: texture });
+		const d3mesh = new THREE.Mesh(d3geometry, material);
+		d3mesh.rotateX(Math.PI * 1);
+		d3mesh.rotateY(Math.PI * 1);
+		d3mesh.rotateZ(Math.PI * 1.5);
+		d3mesh.position.set(0, 0 , 230);
+		kickerMaster.add(d3mesh);				
+
+		//capsule
+		const geometry = new THREE.CapsuleGeometry( 50, 50, 40, 80 ); 
+		const material_cap = new THREE.MeshBasicMaterial( {color: 0xff0000} ); 
+		const d4mesh = new THREE.Mesh( geometry, material_cap ); 
+		d4mesh.position.set(0, 240 , 480);
+		kickerMaster.add(d4mesh);
+
+		kickerMaster.rotateY(Math.PI * 0.5);
+		return kickerMaster;
+	}
diff --git a/components/src/kicker.svg b/components/src/kicker.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c9fe2e1fdbb304f14d6ad7ea880c851f77ed1b2f
--- /dev/null
+++ b/components/src/kicker.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 700px 350px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="translate(0 700) rotate(-90) scale(1.5)">
+		<rect x="110" y="10" width="200" height="340" stroke="#2f2f2f" stroke-width="6px" fill="lightslategrey" />
+		<rect x="310" y="14" width="80" height="330" stroke="#2f2f2f" stroke-width="6px" fill="lightslategrey" />
+		<circle r="25" cx="350" cy="170" fill="red " stroke="red" stroke-width="6px" />
+		<polygon points="110,10 60,40 60,310, 110,350" fill="lightslategrey" stroke="#2f2f2f" stroke-width="6px" />
+	</g>
+</svg>
diff --git a/components/src/klystron.js b/components/src/klystron.js
new file mode 100644
index 0000000000000000000000000000000000000000..fec02eee5d42f947e7b14b60892f4ef528a43086
--- /dev/null
+++ b/components/src/klystron.js
@@ -0,0 +1,218 @@
+// jshint esversion: 6
+	import * as THREE from 'three';
+	import {FontLoader} from 'three/addons/loaders/FontLoader.js';
+	import {TextGeometry} from 'three/addons/geometries/TextGeometry.js';
+
+	// base mod
+	export function klystron(text='KSP', myscale=0.625) {
+		const width=1500, height=1500, depth=1500;
+		const ModK = new THREE.Object3D();
+		const ModContainer = new THREE.Object3D();
+		const materialBase = new THREE.MeshLambertMaterial({color: 0xff0000});
+		const klystron = new THREE.Object3D();
+		let group, textMesh, textGeo, materials;
+		let size = 60;
+		let textheight = 10;
+		let pos = [];
+		let rot = [];
+		const hover = 30;
+		const curveSegments = 8;
+		let font;
+		function insertText(isize, ipos, irot) {
+			group = new THREE.Group();
+			group.position.y = 100;
+			klystron.add( group );
+			size = isize;
+			pos = ipos;
+			rot = irot;
+			loadFont();
+		}
+		function loadFont() {
+			const loader = new FontLoader();
+			// https://threejs.org/examples/fonts/droid_sans_bold.typeface.json
+			loader.load( './fonts/droid_sans_bold.typeface.json', function ( response ) {
+				font = response;
+				refreshText();
+			} );
+		}
+		materials = [
+			new THREE.MeshPhongMaterial( { color: 0x333333, flatShading: true } ), // front
+			new THREE.MeshPhongMaterial( { color: 0x333333 } ) // side
+		];
+		function createText() {
+			textGeo = new TextGeometry(text.replace('TKLY_KG','K').replace('.01',''), {font: font, size: size, height: textheight, curveSegments: curveSegments});
+			textGeo.computeBoundingBox();
+			const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+			textMesh = new THREE.Mesh( textGeo, materials );
+			textMesh.position.x = pos[0];
+			textMesh.position.y = pos[1];
+			textMesh.position.z = pos[2];
+			textMesh.rotation.x = rot[0];
+			textMesh.rotation.y = rot[1];
+			textMesh.rotation.z = rot[2];
+			group.add( textMesh );
+		}
+		function refreshText() {
+			group.remove( textMesh );
+			if ( ! text ) return;
+			createText();
+		}
+		insertText(75, [950,680,560], [0, Math.PI / 2, 0]);
+		
+		const basegeometry = new THREE.BoxGeometry(width, height, depth);
+		const d1mesh = new THREE.Mesh(basegeometry, materialBase);
+		ModContainer.add(d1mesh);
+
+		// cover
+		const d2geometry = new THREE.BoxGeometry(width+100, 100, depth+100);
+		const dmaterial2= new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const d2mesh = new THREE.Mesh(d2geometry, dmaterial2);
+		d2mesh.position.set(0, 800, 0);		
+		ModContainer.add(d2mesh);	
+		
+  		// base
+		const d3geometry = new THREE.BoxGeometry(width+100, 100, depth+100);
+		const d3mesh = new THREE.Mesh(d3geometry, materialBase);
+		d3mesh.position.set(0, -800, 0);		
+		ModContainer.add(d3mesh);	
+	
+		// big cylinder
+		const d4geometry = new THREE.CylinderGeometry(400, 400, 1200, 50);
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/mod_texture.png');	
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(5, 5);		
+		const material = new THREE.MeshBasicMaterial({ map: texture });		
+		const d4mesh = new THREE.Mesh(d4geometry, material);
+		d4mesh.rotateX(Math.PI * 1);
+		d4mesh.rotateY(Math.PI * 1);
+		d4mesh.rotateZ(Math.PI * 1);
+		d4mesh.position.set(0, 970 , 300);			
+		ModContainer.add(d4mesh);	
+
+		// small cylinder
+		const d5geometry = new THREE.CylinderGeometry(200, 200, 1200, 50);
+		const textureLoader2 = new THREE.TextureLoader();
+		const texture2 = textureLoader.load('./components/mod_texture.png');	
+		texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
+		texture2.repeat.set(3, 3);		
+		const material2 = new THREE.MeshBasicMaterial({ map: texture2 });		
+		const d5mesh = new THREE.Mesh(d5geometry, material2);
+		d5mesh.rotateX(Math.PI * 1);
+		d5mesh.rotateY(Math.PI * 1);
+		d5mesh.rotateZ(Math.PI * 1);
+		d5mesh.position.set(0, 1670 , 300);			
+		ModContainer.add(d5mesh);	
+		
+		// high cover
+		const d6geometry = new THREE.CylinderGeometry(220, 220, 90, 50);
+		const materialGreyDark= new THREE.MeshLambertMaterial({color: 0x9d9d9d});
+		const d6mesh = new THREE.Mesh(d6geometry, materialGreyDark);
+		d6mesh.rotateX(Math.PI * 1);
+		d6mesh.rotateY(Math.PI * 1);
+		d6mesh.rotateZ(Math.PI * 1);
+		d6mesh.position.set(0, 2300 , 300);			
+		ModContainer.add(d6mesh);	
+		
+		// right arm
+		const Bracciodx = new THREE.BoxGeometry( 600, 100, 200 );
+		const d7mesh = new THREE.Mesh(Bracciodx, materialBase);
+		d7mesh.rotateX(Math.PI * 1);
+		d7mesh.rotateY(Math.PI * 1.25);
+		d7mesh.rotateZ(Math.PI * 1);		
+		d7mesh.position.set(300, 1300 , 600);			
+		ModContainer.add(d7mesh);	
+
+		// left arm
+		const Bracciosx = new THREE.BoxGeometry( 600, 100, 200 );
+		const d8mesh = new THREE.Mesh(Bracciosx, materialBase);
+		d8mesh.rotateX(Math.PI * 1);
+		d8mesh.rotateY(Math.PI * 1.75);
+		d8mesh.rotateZ(Math.PI * 1);		
+		d8mesh.position.set(300, 1300 , 0);			
+		ModContainer.add(d8mesh);	
+
+		// right arm continue
+		const PBracciodx = new THREE.BoxGeometry( 600, 100, 190 );
+		const d9mesh = new THREE.Mesh(PBracciodx, materialBase);
+		d9mesh.rotateX(Math.PI * 1);
+		d9mesh.rotateY(Math.PI * 1);
+		d9mesh.rotateZ(Math.PI * 1);		
+		d9mesh.position.set(743, 1300 , 790);			
+		ModContainer.add(d9mesh);			
+		
+		//prolung braccia sx
+		const PBracciosx = new THREE.BoxGeometry( 600, 100, 190 );
+		const d10mesh = new THREE.Mesh(PBracciosx, materialBase);
+		d10mesh.rotateX(Math.PI * 1);
+		d10mesh.rotateY(Math.PI * 1);
+		d10mesh.rotateZ(Math.PI * 1);		
+		d10mesh.position.set(743, 1300 , -190);			
+		ModContainer.add(d10mesh);	
+		
+		//trave 1 base
+		const trave1 = new THREE.BoxGeometry( 80, 1500, 190 );
+		const materialtrave= new THREE.MeshLambertMaterial({color: 0xd80000});
+		const d12mesh = new THREE.Mesh(trave1, materialtrave);
+		d12mesh.rotateX(Math.PI * 1);
+		d12mesh.rotateY(Math.PI * 1);
+		d12mesh.rotateZ(Math.PI * 1);		
+		d12mesh.position.set(-760, 0 , -300);			
+		ModContainer.add(d12mesh);	
+		
+		//trave 2 base
+		const trave2 = new THREE.BoxGeometry( 80, 1500, 190 );
+		const d13mesh = new THREE.Mesh(trave1, materialtrave);
+		d13mesh.rotateX(Math.PI * 1);
+		d13mesh.rotateY(Math.PI * 1);
+		d13mesh.rotateZ(Math.PI * 1);		
+		d13mesh.position.set(-760, 0 , 300);			
+		ModContainer.add(d13mesh);	
+
+		//targhetta
+		const targhetta = new THREE.BoxGeometry( 10, 300, 300 );
+		const d14mesh = new THREE.Mesh(targhetta, dmaterial2);
+		d14mesh.position.set(-750, 550 , 0);
+		ModContainer.add(d14mesh);	
+		
+		//Torus basso sx
+		const torus_bs = new THREE.TorusGeometry( 60, 15, 20, 20, 7); 
+		const d15mesh = new THREE.Mesh( torus_bs, materialGreyDark );
+		d15mesh.rotateX(Math.PI * 1);
+		d15mesh.rotateY(Math.PI * 1.5);
+		d15mesh.rotateZ(Math.PI * 1);	
+		d15mesh.position.set(-700, 900 , -600);
+		ModContainer.add(d15mesh);	
+	
+		//Torus basso dx
+		const torus_bd = new THREE.TorusGeometry( 60, 15, 20, 20, 7); 
+		const d16mesh = new THREE.Mesh( torus_bd, materialGreyDark );
+		d16mesh.rotateX(Math.PI * 1);
+		d16mesh.rotateY(Math.PI * 1.5);
+		d16mesh.rotateZ(Math.PI * 1);	
+		d16mesh.position.set(-700, 900 , 600);
+		ModContainer.add(d16mesh);	
+	
+		//Torus alto sx
+		const torus_as = new THREE.TorusGeometry( 60, 15, 20, 20, 7); 
+		const d17mesh = new THREE.Mesh( torus_as, materialGreyDark );
+		d17mesh.rotateX(Math.PI * 1);
+		d17mesh.rotateY(Math.PI * 1.5);
+		d17mesh.rotateZ(Math.PI * 1);	
+		d17mesh.position.set(700, 900 , -600);
+		ModContainer.add(d17mesh);	
+
+		//Torus alto dx
+		const torus_ad = new THREE.TorusGeometry( 60, 15, 20, 20, 7); 
+		const d18mesh = new THREE.Mesh( torus_ad, materialGreyDark );
+		d18mesh.rotateX(Math.PI * 1);
+		d18mesh.rotateY(Math.PI * 1.5);
+		d18mesh.rotateZ(Math.PI * 1);	
+		d18mesh.position.set(700, 900 , 600);
+		ModContainer.add(d18mesh);
+		ModContainer.rotateY(Math.PI);
+		ModContainer.scale.set(myscale, myscale, myscale);
+		ModContainer.position.set(width*myscale/2, height*myscale/2, depth*myscale/2);
+		klystron.add(ModContainer);
+		return klystron;
+	}
diff --git a/components/src/klystron.svg b/components/src/klystron.svg
new file mode 100644
index 0000000000000000000000000000000000000000..58368f348b4b12af59259d823231bc77134b4de2
--- /dev/null
+++ b/components/src/klystron.svg
@@ -0,0 +1,16 @@
+<svg width="700" height="350" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="translate(0 -25)">
+		<rect x="40" y="70" width="300" height="300" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<circle r="80" cx="240" cy="215" fill="#7a7a7a" stroke="#2f2f2f" stroke-width="10px" />
+		<circle r="40" cx="240" cy="215" fill="#edebeb" stroke="#2f2f2f" stroke-width="10px" />
+		<circle r="30" cx="240" cy="215" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="7" cx="70" cy="105" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="7" cx="70" cy="340" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="7" cx="310" cy="105" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="7" cx="310" cy="340" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<line x1="130" y1="120" x2="185" y2="160" stroke="red" stroke-width="28px" />
+		<line x1="340" y1="120" x2="295" y2="160" stroke="red" stroke-width="28px" />
+		<line x1="137" y1="30" x2="137" y2="134" stroke="red" stroke-width="28px" />
+		<line x1="334" y1="30" x2="334" y2="134" stroke="red" stroke-width="28px" />		
+	</g>
+</svg>
diff --git a/components/src/klystron_fast.js b/components/src/klystron_fast.js
new file mode 100644
index 0000000000000000000000000000000000000000..7a32eb6a827048943c7e21aa3565209ef359a2bb
--- /dev/null
+++ b/components/src/klystron_fast.js
@@ -0,0 +1,151 @@
+// jshint esversion: 6
+	import * as THREE from 'three';
+	import {FontLoader} from 'three/addons/loaders/FontLoader.js';
+	import {TextGeometry} from 'three/addons/geometries/TextGeometry.js';
+
+	// base mod
+	export function klystron_fast(text='KSP', myscale=0.625) {
+		const width=1500, height=1500, depth=1500;
+		const ModK = new THREE.Object3D();
+		const ModContainer = new THREE.Object3D();
+		const materialBase = new THREE.MeshLambertMaterial({color: 0xff0000});
+		const klystron = new THREE.Object3D();
+		let group, textMesh, textGeo, materials;
+		let size = 60;
+		let textheight = 10;
+		let pos = [];
+		let rot = [];
+		const hover = 30;
+		const curveSegments = 8;
+		let font;
+		function insertText(isize, ipos, irot) {
+			group = new THREE.Group();
+			group.position.y = 100;
+			klystron.add( group );
+			size = isize;
+			pos = ipos;
+			rot = irot;
+			loadFont();
+		}
+		function loadFont() {
+			const loader = new FontLoader();
+			// https://threejs.org/examples/fonts/droid_sans_bold.typeface.json
+			loader.load( './fonts/droid_sans_bold.typeface.json', function ( response ) {
+				font = response;
+				refreshText();
+			} );
+		}
+		materials = [
+			new THREE.MeshPhongMaterial( { color: 0x333333, flatShading: true } ), // front
+			new THREE.MeshPhongMaterial( { color: 0x333333 } ) // side
+		];
+		function createText() {
+			textGeo = new TextGeometry(text.replace('TKLY_KG','K').replace('.01',''), {font: font, size: size, height: textheight, curveSegments: curveSegments});
+			textGeo.computeBoundingBox();
+			const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+			textMesh = new THREE.Mesh( textGeo, materials );
+			textMesh.position.x = pos[0];
+			textMesh.position.y = pos[1];
+			textMesh.position.z = pos[2];
+			textMesh.rotation.x = rot[0];
+			textMesh.rotation.y = rot[1];
+			textMesh.rotation.z = rot[2];
+			group.add( textMesh );
+		}
+		function refreshText() {
+			group.remove( textMesh );
+			if ( ! text ) return;
+			createText();
+		}
+		insertText(75, [950,680,560], [0, Math.PI / 2, 0]);
+		
+		const basegeometry = new THREE.BoxGeometry(width, height, depth);
+		const d1mesh = new THREE.Mesh(basegeometry, materialBase);
+		ModContainer.add(d1mesh);
+
+		// cover
+		const d2geometry = new THREE.BoxGeometry(width+100, 100, depth+100);
+		const dmaterial2= new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const d2mesh = new THREE.Mesh(d2geometry, dmaterial2);
+		d2mesh.position.set(0, 800, 0);		
+		ModContainer.add(d2mesh);	
+		
+		const materialGreyDark= new THREE.MeshLambertMaterial({color: 0x9d9d9d});
+		
+		// big cylinder
+		const d4geometry = new THREE.CylinderGeometry(400, 400, 1200, 50);
+		const d4mesh = new THREE.Mesh(d4geometry, materialGreyDark);
+		d4mesh.rotateX(Math.PI * 1);
+		d4mesh.rotateY(Math.PI * 1);
+		d4mesh.rotateZ(Math.PI * 1);
+		d4mesh.position.set(0, 970 , 300);			
+		ModContainer.add(d4mesh);	
+
+		// small cylinder
+		const d5geometry = new THREE.CylinderGeometry(200, 200, 1200, 50);
+		const d5mesh = new THREE.Mesh(d5geometry, materialGreyDark);
+		d5mesh.rotateX(Math.PI * 1);
+		d5mesh.rotateY(Math.PI * 1);
+		d5mesh.rotateZ(Math.PI * 1);
+		d5mesh.position.set(0, 1670 , 300);			
+		ModContainer.add(d5mesh);	
+		
+		// high cover
+		const d6geometry = new THREE.CylinderGeometry(220, 220, 90, 50);
+		const d6mesh = new THREE.Mesh(d6geometry, materialGreyDark);
+		d6mesh.rotateX(Math.PI * 1);
+		d6mesh.rotateY(Math.PI * 1);
+		d6mesh.rotateZ(Math.PI * 1);
+		d6mesh.position.set(0, 2300 , 300);			
+		ModContainer.add(d6mesh);	
+		
+		// right arm
+		const Bracciodx = new THREE.BoxGeometry( 600, 100, 200 );
+		const d7mesh = new THREE.Mesh(Bracciodx, materialBase);
+		d7mesh.rotateX(Math.PI * 1);
+		d7mesh.rotateY(Math.PI * 1.25);
+		d7mesh.rotateZ(Math.PI * 1);		
+		d7mesh.position.set(300, 1300 , 600);			
+		ModContainer.add(d7mesh);	
+
+		// left arm
+		const Bracciosx = new THREE.BoxGeometry( 600, 100, 200 );
+		const d8mesh = new THREE.Mesh(Bracciosx, materialBase);
+		d8mesh.rotateX(Math.PI * 1);
+		d8mesh.rotateY(Math.PI * 1.75);
+		d8mesh.rotateZ(Math.PI * 1);		
+		d8mesh.position.set(300, 1300 , 0);			
+		ModContainer.add(d8mesh);	
+
+		// right arm continue
+		const PBracciodx = new THREE.BoxGeometry( 600, 100, 190 );
+		const d9mesh = new THREE.Mesh(PBracciodx, materialBase);
+		d9mesh.rotateX(Math.PI * 1);
+		d9mesh.rotateY(Math.PI * 1);
+		d9mesh.rotateZ(Math.PI * 1);		
+		d9mesh.position.set(743, 1300 , 790);			
+		ModContainer.add(d9mesh);			
+		
+		//prolung braccia sx
+		const PBracciosx = new THREE.BoxGeometry( 600, 100, 190 );
+		const d10mesh = new THREE.Mesh(PBracciosx, materialBase);
+		d10mesh.rotateX(Math.PI * 1);
+		d10mesh.rotateY(Math.PI * 1);
+		d10mesh.rotateZ(Math.PI * 1);		
+		d10mesh.position.set(743, 1300 , -190);			
+		ModContainer.add(d10mesh);	
+		
+
+		//targhetta
+		const targhetta = new THREE.BoxGeometry( 10, 300, 300 );
+		const d14mesh = new THREE.Mesh(targhetta, dmaterial2);
+		d14mesh.position.set(-750, 550 , 0);
+		ModContainer.add(d14mesh);	
+		
+
+		ModContainer.rotateY(Math.PI);
+		ModContainer.scale.set(myscale, myscale, myscale);
+		ModContainer.position.set(width*myscale/2, height*myscale/2, depth*myscale/2);
+		klystron.add(ModContainer);
+		return klystron;
+	}
diff --git a/components/src/klystronx.js b/components/src/klystronx.js
new file mode 100644
index 0000000000000000000000000000000000000000..fc5c2049265c797460b9e18f6053dd6e5f7ff998
--- /dev/null
+++ b/components/src/klystronx.js
@@ -0,0 +1,196 @@
+// jshint esversion: 6
+	import * as THREE from 'three';
+	import {FontLoader} from 'three/addons/loaders/FontLoader.js';
+	import {TextGeometry} from 'three/addons/geometries/TextGeometry.js';
+	
+
+	// base KXS
+	export function klystronx(text='K4', myscale=0.625) {
+		const klystron = new THREE.Object3D();
+		let group, textMesh, textGeo, materials;
+		let size = 100;
+		let textheight = 10;
+		let pos = [];
+		let rot = [];
+		const hover = 30;
+		const curveSegments = 8;
+		let font;
+		function insertText(isize, ipos, irot) {
+			group = new THREE.Group();
+			group.position.y = 100;
+			klystron.add( group );
+			size = isize;
+			pos = ipos;
+			rot = irot;
+			loadFont();
+		}
+		function loadFont() {
+			const loader = new FontLoader();
+			// https://threejs.org/examples/fonts/droid_sans_bold.typeface.json
+			loader.load( './fonts/droid_sans_bold.typeface.json', function ( response ) {
+				font = response;
+				refreshText();
+			} );
+		}
+		materials = [
+			new THREE.MeshPhongMaterial( { color: 0x333333, flatShading: true } ), // front
+			new THREE.MeshPhongMaterial( { color: 0x333333 } ) // side
+		];
+		function createText() {
+			textGeo = new TextGeometry(text, {font: font, size: size, height: textheight, curveSegments: curveSegments});
+			textGeo.computeBoundingBox();
+			const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
+			textMesh = new THREE.Mesh( textGeo, materials );
+			textMesh.position.x = pos[0];
+			textMesh.position.y = pos[1];
+			textMesh.position.z = pos[2];
+			textMesh.rotation.x = rot[0];
+			textMesh.rotation.y = rot[1];
+			textMesh.rotation.z = rot[2];
+			group.add( textMesh );
+		}
+		function refreshText() {
+			group.remove( textMesh );
+			if ( ! text ) return;
+			createText();
+		}
+		insertText(100, [760,600,840], [0, Math.PI / 2, 0]);
+
+		const width=1200, height=1200, depth=1200;
+		const ModK = new THREE.Object3D();
+		const ModContainer = new THREE.Object3D();
+		const materialBase = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const materialGreyDark= new THREE.MeshLambertMaterial({color: 0x9d9d9d});
+		const basegeometry = new THREE.BoxGeometry(width, height+200, depth);
+		const d1mesh = new THREE.Mesh(basegeometry, materialBase);
+		d1mesh.position.set(0, 100, -900);	
+		ModContainer.add(d1mesh);
+
+		// redcube
+		const d2geometry = new THREE.BoxGeometry(width-400, height, depth);
+		const dmaterial2= new THREE.MeshLambertMaterial({color: 0xe02900});
+		const d2mesh = new THREE.Mesh(d2geometry, dmaterial2);
+		d2mesh.position.set(200, 1400, -900);		
+		ModContainer.add(d2mesh);	
+		
+  		// base
+		const d3geometry = new THREE.BoxGeometry(width, height, depth);
+		const d3mesh = new THREE.Mesh(d3geometry, materialBase);
+		d3mesh.position.set(0, 0, 300);		
+		ModContainer.add(d3mesh);	
+	
+		// big red cylinder
+		const d4geometry = new THREE.CylinderGeometry(450, 450, 1200, 50);
+		const material = new THREE.MeshLambertMaterial({color: 0xfc0303});	
+		const d4mesh = new THREE.Mesh(d4geometry, material);
+		d4mesh.rotateX(Math.PI * 1);
+		d4mesh.rotateY(Math.PI * 1);
+		d4mesh.rotateZ(Math.PI * 1);
+		d4mesh.position.set(0, 800 , 300);			
+		ModContainer.add(d4mesh);	
+
+		// yellow 1 cylinder
+		const d5geometry = new THREE.CylinderGeometry(300, 370, 200, 50);
+		const material2 = new THREE.MeshLambertMaterial({color: 0xecfc03});			
+		const d5mesh = new THREE.Mesh(d5geometry, material2);
+		d5mesh.rotateX(Math.PI * 1);
+		d5mesh.rotateY(Math.PI * 1);
+		d5mesh.rotateZ(Math.PI * 1);
+		d5mesh.position.set(0, 1450 , 300);			
+		ModContainer.add(d5mesh);	
+		
+		//  yellow 2 cylinder
+		const d6geometry = new THREE.CylinderGeometry(150, 150, 250, 50);
+		const material3= new THREE.MeshLambertMaterial({color: 0xecfc03});
+		const d6mesh = new THREE.Mesh(d6geometry, material3);
+		d6mesh.rotateX(Math.PI * 1);
+		d6mesh.rotateY(Math.PI * 1);
+		d6mesh.rotateZ(Math.PI * 1);
+		d6mesh.position.set(0, 1680 , 300);			
+		ModContainer.add(d6mesh);	
+
+		//  yellow 3 cylinder
+		const d7geometry = new THREE.CylinderGeometry(200, 200, 100, 50);
+		const d7mesh = new THREE.Mesh(d7geometry, material3);
+		d7mesh.rotateX(Math.PI * 1);
+		d7mesh.rotateY(Math.PI * 1);
+		d7mesh.rotateZ(Math.PI * 1);
+		d7mesh.position.set(0, 1780 , 300);			
+		ModContainer.add(d7mesh);			
+		
+		// tag
+		const targhetta = new THREE.BoxGeometry( 10, 200, 300 );
+		const materialwhite= new THREE.MeshLambertMaterial({color: 0xeffffff});
+		const d14mesh = new THREE.Mesh(targhetta, materialwhite);
+		d14mesh.position.set(-610, 600 , -600);
+		ModContainer.add(d14mesh);	
+		
+		// torus red1 
+		const torus_bs = new THREE.TorusGeometry( 60, 15, 20, 20, 7); 
+		const d15mesh = new THREE.Mesh( torus_bs, materialGreyDark );
+		d15mesh.rotateX(Math.PI * 1);
+		d15mesh.rotateY(Math.PI * 1.5);
+		d15mesh.rotateZ(Math.PI * 1);	
+		d15mesh.position.set(550, 2050 , -1400);
+		ModContainer.add(d15mesh);	
+	
+		// torus red2
+		const torus_bd = new THREE.TorusGeometry( 60, 15, 20, 20, 7); 
+		const d16mesh = new THREE.Mesh( torus_bd, materialGreyDark );
+		d16mesh.rotateX(Math.PI * 1);
+		d16mesh.rotateY(Math.PI * 1.5);
+		d16mesh.rotateZ(Math.PI * 1);	
+		d16mesh.position.set(-150, 2050 , -400);
+		ModContainer.add(d16mesh);	
+	
+		// torus 1 white
+		const torus_as = new THREE.TorusGeometry( 60, 15, 20, 20, 7); 
+		const d17mesh = new THREE.Mesh( torus_as, materialGreyDark );
+		d17mesh.rotateX(Math.PI * 1);
+		d17mesh.rotateY(Math.PI * 1.5);
+		d17mesh.rotateZ(Math.PI * 1);	
+		d17mesh.position.set(-400, 850 , -500);
+		ModContainer.add(d17mesh);	
+
+		// torus 2 white
+		const torus_ad = new THREE.TorusGeometry( 60, 15, 20, 20, 7); 
+		const d18mesh = new THREE.Mesh( torus_ad, materialGreyDark );
+		d18mesh.rotateX(Math.PI * 1);
+		d18mesh.rotateY(Math.PI * 1.5);
+		d18mesh.rotateZ(Math.PI * 1);	
+		d18mesh.position.set(-400, 850 , -1300);
+		ModContainer.add(d18mesh);
+		
+		// line1
+		const line1 = new THREE.BoxGeometry(10, 10, 1150);
+		const d19mesh = new THREE.Mesh(line1, dmaterial2);
+		d19mesh.position.set(-610, 750, -900);		
+		ModContainer.add(d19mesh);		
+	
+		// line2
+		const line2 = new THREE.BoxGeometry(10, 10, 1150);
+		const d20mesh = new THREE.Mesh(line2, dmaterial2);
+		d20mesh.position.set(-610, 550, 300);		
+		ModContainer.add(d20mesh);			
+		
+		//text
+/*		const loader = new FontLoader (); 
+		loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
+    	const textGeometry = new TextGeometry('KX', { 
+		font : font,
+		size: 100,
+		height: 100
+   		});
+		});	
+	
+ 		const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
+		const textMesh = new THREE.Mesh(textGeometry, textMaterial);
+		textMesh.position.set(-820, 600, -600);
+    	ModContainer.add(textMesh);		
+*/	
+		ModContainer.rotateY(Math.PI);
+		ModContainer.scale.set(myscale, myscale, myscale);
+		ModContainer.position.set(width*myscale/2, height*myscale/2, depth*myscale/2);
+		klystron.add(ModContainer);
+		return klystron;
+	}
diff --git a/components/src/klystronx.svg b/components/src/klystronx.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2f78a35fbedc692f76e34f13481abd08c21c1aed
--- /dev/null
+++ b/components/src/klystronx.svg
@@ -0,0 +1,14 @@
+<svg width="700" height="350" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="translate(0 -25)">
+		<rect x="40" y="70" width="400" height="300" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<rect x="40" y="70" width="200" height="200" stroke="#2f2f2f" stroke-width="7" fill="#e02900" />	
+		<circle r="90" cx="340" cy="215" fill="red" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="70" cx="340" cy="215" fill="yellow" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="60" cx="340" cy="215" fill="yellow" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="7" cx="70" cy="105" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="7" cx="70" cy="320" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="7" cx="210" cy="240" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="7" cx="210" cy="320" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+	    <line x1="240" y1="70" x2="240" y2="370" stroke="black" stroke-width="5px" />	
+	</g>
+</svg>
diff --git a/components/src/octupole.js b/components/src/octupole.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9e77f8951ace838ff8e0bf2e6cce03384ca1871
--- /dev/null
+++ b/components/src/octupole.js
@@ -0,0 +1,52 @@
+	import * as THREE from 'three';
+
+	// octupole
+	export function octupole(length=150) {
+		const OctupoleContiner = new THREE.Object3D();
+		const OctupoleMaster = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xf01988});
+
+		// support high
+		const geometry_1 = new THREE.BoxGeometry(length, 100, 150);
+		const dmesh_1 = new THREE.Mesh(geometry_1, dmaterial);
+		dmesh_1.position.set(0, 324, 0);
+		OctupoleMaster.add(dmesh_1);
+
+		// support side
+		const dmesh_2 = new THREE.Mesh(geometry_1, dmaterial);
+		dmesh_2.position.set(0, 299, -124);
+		dmesh_2.rotateX(-Math.PI / 8);
+		OctupoleMaster.add(dmesh_2);
+
+		const geometry3 = new THREE.BoxGeometry(length-30, 120, 50);
+		const dmesh3 = new THREE.Mesh(geometry3, dmaterial);
+		dmesh3.position.set(0, 140, 0);
+		OctupoleMaster.add(dmesh3);
+
+		// coil
+		const coilmaterial = new THREE.MeshLambertMaterial({color: 0xc08000});
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/coil_texture.png');
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(5, 5);
+		const d6geometry = new THREE.CylinderGeometry(80 /*radiusTop*/, 80 /*radiusBottom*/, 80 /*height*/, 25 /*radialSegments*/, 4 /*heightSegments*/, false /*openEnded*/,Math.PI * 1.5 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const material6 = new THREE.MeshBasicMaterial({ map: texture });
+		const materialside6 = new THREE.MeshBasicMaterial({color: 0xcd7f32});
+		const materials6 = [material6, materialside6, materialside6];		
+		const d6mesh = new THREE.Mesh(d6geometry, materials6);
+		d6mesh.position.set(0, 230, 0);
+		d6mesh.rotateX(Math.PI * 1.50);
+		d6mesh.rotateY(Math.PI * 1.50);
+		d6mesh.rotateZ(Math.PI * 1.50);
+		OctupoleMaster.add(d6mesh);
+
+		for (let i=1; i<8; i++) {
+			const Octupole2 = OctupoleMaster.clone();
+			Octupole2.rotateX(-Math.PI / 4*i);
+			OctupoleContiner.add(Octupole2);
+		}
+		OctupoleContiner.add(OctupoleMaster);
+		OctupoleContiner.rotateY(Math.PI * -0.5);
+
+		return OctupoleContiner;
+	}
diff --git a/components/src/octupole.svg b/components/src/octupole.svg
new file mode 100644
index 0000000000000000000000000000000000000000..bdc6badcd4dbfc654adf02ce31e365ecd25a39a4
--- /dev/null
+++ b/components/src/octupole.svg
@@ -0,0 +1,10 @@
+<svg width="200" height="210" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g class="layer" transform="translate(-36,-40)">
+ 		<rect x="50" y="50" width="110" height="110" rx="10" ry="10" fill="#F01988" stroke="darkslategrey" stroke-width="5"/>
+  		  <text x="105" y="134" text-anchor="middle" font-family="Arial" font-size="90" fill="white" stroke-width="2">O</text>
+		<path d="M 48 60 a 90 55 0 0 0 0 45 M 162 60 a 90 55 0 0 1 0 45 " stroke="#ffe600" stroke-width="2" fill="#ff7501" />
+		<path d="M 48 105 a 90 55 0 0 0 0 45 M 162 105 a 90 55 0 0 1 0 45" stroke="#ffe600" stroke-width="2" fill="#ff7501" />
+		<path d="M 60 48 Q80 30 105 48 M 60 162 Q80 180 105 162" stroke="#ffe600" stroke-width="2" fill="#ff7501" />
+		<path d="M 105 48 Q130 30 150 48 M 105 162 Q130 180 155 160" stroke="#ffe600" stroke-width="2" fill="#ff7501" /> 
+	</g>
+</svg>
diff --git a/components/src/plc.js b/components/src/plc.js
new file mode 100644
index 0000000000000000000000000000000000000000..331d297bcc3427f56b5f1409a038bfd19a1457fd
--- /dev/null
+++ b/components/src/plc.js
@@ -0,0 +1,117 @@
+	import * as THREE from 'three';
+
+
+	// PLC
+	export function plc(width=500, height=300, depth=600) {
+		const plcObject = new THREE.Object3D();
+		const cardsObject = new THREE.Object3D();
+		
+	
+		const greenmaterial = new THREE.MeshLambertMaterial({color: 0x00ff11});
+		const greenDarkmaterial = new THREE.MeshLambertMaterial({color: 0x0b5e11});
+		const graymaterial = new THREE.MeshLambertMaterial({color: 0x575757});
+		const graymaterial2 = new THREE.MeshLambertMaterial({color: 0x7d7d7d});
+		const silvermaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const blackmaterial = new THREE.MeshLambertMaterial({color: 0x000000});
+
+		
+		// base
+		const basegeometry = new THREE.BoxGeometry(width, height, depth);
+		const basegeometrymesh = new THREE.Mesh(basegeometry, silvermaterial);
+		basegeometrymesh.position.set( 0, 0 ,0);
+		plcObject.add(basegeometrymesh);	
+		
+		// card
+		const cardgeometry = new THREE.BoxGeometry(5, 270, 50);
+		const cardgeometrymesh = new THREE.Mesh(cardgeometry, blackmaterial);
+		cardgeometrymesh.position.set( -250, 0 , -200);
+		cardsObject.add(cardgeometrymesh);
+		
+		//led1
+		const led1green = new THREE.BoxGeometry(3, 20, 20);
+		const led1greenmesh = new THREE.Mesh(led1green, greenmaterial);
+		led1greenmesh.position.set( -254, 120 , -200);
+		cardsObject.add(led1greenmesh);		
+		//led2
+		const led2green = new THREE.BoxGeometry(3, 20, 20);
+		const led2greenmesh = new THREE.Mesh(led2green, greenmaterial);
+		led2greenmesh.position.set( -254, 90 , -200);
+		cardsObject.add(led2greenmesh);
+		//led3
+		const led3green = new THREE.BoxGeometry(3, 20, 20);
+		const led3greenmesh = new THREE.Mesh(led3green, greenmaterial);
+		led3greenmesh.position.set( -254, 60 , -200);
+		cardsObject.add(led3greenmesh);
+		//led4
+		const led4green = new THREE.BoxGeometry(3, 20, 20);
+		const led4greenmesh = new THREE.Mesh(led4green, greenmaterial);
+		led4greenmesh.position.set( -254, 30 , -200);
+		cardsObject.add(led4greenmesh);
+		//led5
+		const led5green = new THREE.BoxGeometry(3, 20, 20);
+		const led5greenmesh = new THREE.Mesh(led5green, greenDarkmaterial);
+		led5greenmesh.position.set( -254, 0 , -200);
+		cardsObject.add(led5greenmesh);			
+		//led6
+		const led6green = new THREE.BoxGeometry(3, 20, 20);
+		const led6greenmesh = new THREE.Mesh(led6green, greenDarkmaterial);
+		led6greenmesh.position.set( -254, -30 , -200);
+		cardsObject.add(led6greenmesh);
+		//led7
+		const led7green = new THREE.BoxGeometry(3, 20, 20);
+		const led7greenmesh = new THREE.Mesh(led7green, greenDarkmaterial);
+		led7greenmesh.position.set( -254, -60 , -200);
+		cardsObject.add(led7greenmesh);		
+		//led8
+		const led8green = new THREE.BoxGeometry(3, 20, 20);
+		const led8greenmesh = new THREE.Mesh(led8green, greenDarkmaterial);
+		led8greenmesh.position.set( -254, -90 , -200);
+		cardsObject.add(led8greenmesh);
+		//led9
+		const led9green = new THREE.BoxGeometry(3, 20, 20);
+		const led9greenmesh = new THREE.Mesh(led9green, greenDarkmaterial);
+		led9greenmesh.position.set( -254, -120 , -200);
+		cardsObject.add(led9greenmesh);		
+		
+		//CLONE Cards
+
+		const card2 = cardsObject.clone();
+		card2.position.set( 0, 0 , 50);
+		plcObject.add(card2);
+		
+		const card3 = cardsObject.clone();
+		card3.position.set( 0, 0 , 100);
+		plcObject.add(card3);
+		
+		const card4 = cardsObject.clone();
+		card4.position.set( 0, 0 , 150);
+		plcObject.add(card4);	
+		
+		const card5 = cardsObject.clone();
+		card5.position.set( 0, 0 , 200);
+		plcObject.add(card5);
+		
+		// baseScreen
+		const baseScreengeometry = new THREE.BoxGeometry(5, 270, 200);
+		const baseScreengeometrymesh = new THREE.Mesh(baseScreengeometry, blackmaterial);
+		baseScreengeometrymesh.position.set( -254, 0 , 120);
+		plcObject.add(baseScreengeometrymesh);	
+		
+		// 1livel
+		const livel1geometry = new THREE.BoxGeometry(50, 150, 150);
+		const livel1geometrymesh = new THREE.Mesh(livel1geometry, graymaterial);
+		livel1geometrymesh.position.set( -256, 0 , 120);
+		plcObject.add(livel1geometrymesh);
+		// 2livel
+		const livel2geometry = new THREE.BoxGeometry(50, 100, 149);
+		const livel2geometrymesh = new THREE.Mesh(livel2geometry, graymaterial2);
+		livel2geometrymesh.position.set( -286, 0 , 120);
+		plcObject.add(livel2geometrymesh);			
+		
+		
+		plcObject.add(cardsObject);
+		
+	
+		
+		return plcObject;
+	}
diff --git a/components/src/quadrupole.js b/components/src/quadrupole.js
new file mode 100644
index 0000000000000000000000000000000000000000..2752c07ea571a61e61d45b7f3a771ac5d1f511b9
--- /dev/null
+++ b/components/src/quadrupole.js
@@ -0,0 +1,26 @@
+	import * as THREE from 'three';
+
+	// Quadrupole
+	export function quadrupole(length=260) {
+		const quadrupoleMaster = new THREE.Object3D();
+		const chamberMaterial = new THREE.MeshLambertMaterial({color: 0xc0c0c0});
+		const quadrupolematerial = new THREE.MeshLambertMaterial({color: 0xff7050});
+		const quadrupolegeometry = new THREE.CylinderGeometry(250, 250, length, 8);
+		const quadrupolemesh = new THREE.Mesh(quadrupolegeometry, quadrupolematerial);
+		quadrupoleMaster.add(quadrupolemesh);
+		const quadrupole2geometry = new THREE.CylinderGeometry(290, 290, 30, 50);
+		const quadrupole2mesh = new THREE.Mesh(quadrupole2geometry, chamberMaterial);
+		quadrupole2mesh.position.set(0, -length/2-15, 0);
+		quadrupoleMaster.add(quadrupole2mesh);
+		const quadrupole3mesh = new THREE.Mesh(quadrupole2geometry, chamberMaterial);
+		quadrupole3mesh.position.set(0, length/2+15, 0);
+		quadrupoleMaster.add(quadrupole3mesh);
+		quadrupoleMaster.rotateX(Math.PI * 0.5);
+		quadrupoleMaster.rotatedX = true;
+		const qedges = new THREE.EdgesGeometry(quadrupolegeometry);
+		const lineMaterial = new THREE.LineBasicMaterial({color: 0x600000});
+		lineMaterial.linewidth = 4;
+		const qline = new THREE.LineSegments(qedges, lineMaterial);
+		quadrupoleMaster.add(qline);
+		return quadrupoleMaster;
+	}
diff --git a/components/src/quadrupole.svg b/components/src/quadrupole.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6f7c5fc9cb9da64816bd87d43876e6ce3907e413
--- /dev/null
+++ b/components/src/quadrupole.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 400px 210px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2)">
+		<rect x="50" y="50" width="110" height="110" rx="10" ry="10" fill="#ff3d3d" stroke="darkslategrey" stroke-width="5"/>
+		<text x="105" y="135" text-anchor="middle" font-family="Arial" font-size="90" fill="white" width="2">Q</text>
+		<path d="M 47 60 a 90 55 0 0 0 0 45 M 162 60 a 90 55 0 0 1 0 45" stroke="#ffe600" stroke-width="2" fill="#ff7501" />
+		<path d="M 47 105 a 90 55 0 0 0 0 45 M 162 105 a 90 55 0 0 1 0 45" stroke="#ffe600" stroke-width="2" fill="#ff7501" />
+	</g>
+</svg>
diff --git a/components/src/quadrupolebooster.js b/components/src/quadrupolebooster.js
new file mode 100644
index 0000000000000000000000000000000000000000..fc04cc38839be131abbf0d51b2d97320a236bcd8
--- /dev/null
+++ b/components/src/quadrupolebooster.js
@@ -0,0 +1,107 @@
+// jshint esversion: 6	
+	import * as THREE from 'three';
+
+	// quadrupole booster
+	export function quadrupolebooster(length=200) {
+		const QuadrupolContiner = new THREE.Object3D();
+		const QuadrupoleMaster = new THREE.Object3D();
+		
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xe05040, side: THREE.DoubleSide});
+		const d1geometry = new THREE.CylinderGeometry(500, 500, length, 4 /*radialSegments*/, 2 /*heightSegments*/, true /*openEnded*/,0 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		d1mesh.position.set(0, 0, 0);
+		d1mesh.rotateX(Math.PI * 1.25);
+		d1mesh.rotateY(Math.PI * 1);
+		d1mesh.rotateZ(Math.PI * 1.5);	
+		QuadrupoleMaster.add(d1mesh);	
+		
+		// coil settings
+		const coilmaterial = new THREE.MeshLambertMaterial({color: 0xcd7f32, side: THREE.DoubleSide});
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/coil_texture.png');
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(5, 5);
+		const coiltexture = new THREE.MeshBasicMaterial({ map: texture });
+		const coilmaterials = [coiltexture, coilmaterial, coilmaterial];
+		const coilgeometry = new THREE.CylinderGeometry(110 /*radiusTop*/, 110 /*radiusBottom*/, 120 /*height*/, 25 /*radialSegments*/, 4 /*heightSegments*/, false /*openEnded*/,Math.PI * 1.5 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		
+		//spessore alto
+		const redmaterial = new THREE.MeshLambertMaterial({color: 0xe05040});
+		const geometry_1 = new THREE.BoxGeometry(200, 100, 705);
+		const dmesh_1 = new THREE.Mesh(geometry_1, redmaterial);
+		dmesh_1.position.set(0, 300, 0);
+		QuadrupoleMaster.add(dmesh_1);
+		
+		//spessore basso
+		const dmesh_2 = new THREE.Mesh(geometry_1, redmaterial);
+		dmesh_2.position.set(0, -300, 0);
+		QuadrupoleMaster.add(dmesh_2);
+		
+		//spessore destro
+		const geometry_3 = new THREE.BoxGeometry(200, 500, 100);
+		const dmesh_3 = new THREE.Mesh(geometry_3, redmaterial);
+		dmesh_3.position.set(0, 0, -300);
+		QuadrupoleMaster.add(dmesh_3);	
+		
+		//spessore sinistro
+		const dmesh_4 = new THREE.Mesh(geometry_3, redmaterial);
+		dmesh_4.position.set(0, 0, 300);
+		QuadrupoleMaster.add(dmesh_4);			
+
+		const geometry_5 = new THREE.BoxGeometry(200, 115, 280);
+		const dmesh_5 = new THREE.Mesh(geometry_5, redmaterial);
+		dmesh_5.rotateX(Math.PI * 0.25);
+		dmesh_5.position.set(0, 210, 210);
+		QuadrupoleMaster.add(dmesh_5);			
+		const dmesh_6 = new THREE.Mesh(geometry_5, redmaterial);
+		dmesh_6.rotateX(Math.PI * 0.75);
+		dmesh_6.position.set(0, 210, -210);
+		QuadrupoleMaster.add(dmesh_6);			
+		const dmesh_7 = new THREE.Mesh(geometry_5, redmaterial);
+		dmesh_7.rotateX(Math.PI * 0.75);
+		dmesh_7.position.set(0, -210, 210);
+		QuadrupoleMaster.add(dmesh_7);			
+		const dmesh_8 = new THREE.Mesh(geometry_5, redmaterial);
+		dmesh_8.rotateX(Math.PI * 0.25);
+		dmesh_8.position.set(0, -210, -210);
+		QuadrupoleMaster.add(dmesh_8);			
+		
+		// coil basso destra 
+		const d2mesh = new THREE.Mesh(coilgeometry, coilmaterials);
+		d2mesh.position.set(0, -130, 120);
+		d2mesh.rotateX(Math.PI * 1.25);
+		d2mesh.rotateY(Math.PI * 1.50);
+		d2mesh.rotateZ(Math.PI * 1.50);
+		QuadrupoleMaster.add(d2mesh);
+
+		// coil basso sinistra 
+		const d3mesh = new THREE.Mesh(coilgeometry, coilmaterials);
+		d3mesh.position.set(0, -130, -120);
+		d3mesh.rotateX(Math.PI * 1.75);
+		d3mesh.rotateY(Math.PI * 1.50);
+		d3mesh.rotateZ(Math.PI * 1.50);
+		QuadrupoleMaster.add(d3mesh);
+		
+		// coil alto destra 
+		const d4mesh = new THREE.Mesh(coilgeometry, coilmaterials);
+		d4mesh.position.set(0, 130, 120);
+		d4mesh.rotateX(Math.PI * 0.75);
+		d4mesh.rotateY(Math.PI * 1.50);
+		d4mesh.rotateZ(Math.PI * 1.50);
+		QuadrupoleMaster.add(d4mesh);
+
+		// coil alto destra 
+		const d5mesh = new THREE.Mesh(coilgeometry, coilmaterials);
+		d5mesh.position.set(0, 130, -120);
+		d5mesh.rotateX(Math.PI * 1.25);
+		d5mesh.rotateY(Math.PI * 1.50);
+		d5mesh.rotateZ(Math.PI * 1.50);
+		QuadrupoleMaster.add(d5mesh);
+		
+		QuadrupoleMaster.position.set(0, 0, 0);
+		QuadrupolContiner.add(QuadrupoleMaster);
+		QuadrupolContiner.rotateY(Math.PI * -0.5);
+				
+		
+		return QuadrupolContiner;
+	}
diff --git a/components/src/quadrupoleboosterfast.js b/components/src/quadrupoleboosterfast.js
new file mode 100644
index 0000000000000000000000000000000000000000..a7221d44bf01b4bf609c90b8028c351ce330f611
--- /dev/null
+++ b/components/src/quadrupoleboosterfast.js
@@ -0,0 +1,11 @@
+	import * as THREE from 'three';
+
+	// quadrupole
+	export function quadrupoleboosterfast(length=300) {
+		const quadrupoleMaster = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xe05040});
+		const d1geometry = new THREE.BoxGeometry(550, 500, length);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		quadrupoleMaster.add(d1mesh);				
+		return quadrupoleMaster;
+	}
diff --git a/components/src/quadrupolefermi.js b/components/src/quadrupolefermi.js
new file mode 100644
index 0000000000000000000000000000000000000000..e4ca952cf6ee13c9692e27509f14fef55552363b
--- /dev/null
+++ b/components/src/quadrupolefermi.js
@@ -0,0 +1,64 @@
+// jshint esversion: 6	
+	import * as THREE from 'three';
+
+	// sextupole booster
+	export function quadrupolefermi(length=450) {
+		const QuadrupoleContiner = new THREE.Object3D();
+		const QuadrupoleMaster = new THREE.Object3D();
+		
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xFF0000});
+		
+		// support alto
+		const geometry_1 = new THREE.BoxGeometry(length, 100, 200);
+		const dmesh_1 = new THREE.Mesh(geometry_1, dmaterial);
+		dmesh_1.position.set(0, 324, 0);
+		QuadrupoleMaster.add(dmesh_1);
+		
+		// support side destra
+		const dmesh_2 = new THREE.Mesh(geometry_1, dmaterial);
+		dmesh_2.position.set(0, 280, -162);
+		dmesh_2.rotateX(-Math.PI / 6);
+		QuadrupoleMaster.add(dmesh_2);
+
+		// support side sinistra 
+		const dmesh_3 = new THREE.Mesh(geometry_1, dmaterial);
+		dmesh_3.position.set(0, -280, -162);
+		dmesh_3.rotateX(-Math.PI / -6);
+		QuadrupoleMaster.add(dmesh_3);		
+		
+		const geometry4 = new THREE.BoxGeometry(length-30, 120, 50);
+		const dmesh4 = new THREE.Mesh(geometry4, dmaterial);
+		dmesh4.position.set(0, 140, 0);
+		QuadrupoleMaster.add(dmesh4);
+		
+		
+		// coil
+		const coilmaterial = new THREE.MeshLambertMaterial({color: 0xc08000});
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/coil_texture.png');
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(5, 5);
+		const d6geometry = new THREE.CylinderGeometry(250 /*radiusTop*/, 250 /*radiusBottom*/, 80 /*height*/, 25 /*radialSegments*/, 4 /*heightSegments*/, false /*openEnded*/,Math.PI * 1.5 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const material6 = new THREE.MeshBasicMaterial({ map: texture });
+		const materialside6 = new THREE.MeshBasicMaterial({color: 0xcd7f32});
+		const materials6 = [material6, materialside6, materialside6];		
+		const d6mesh = new THREE.Mesh(d6geometry, materials6);
+		d6mesh.position.set(0, 230, 0);
+		d6mesh.rotateX(Math.PI * 1.50);
+		d6mesh.rotateY(Math.PI * 1.50);
+		d6mesh.rotateZ(Math.PI * 1.50);
+		QuadrupoleMaster.add(d6mesh);
+		
+		for (let i=1; i<4; i++) {
+			const Quadrupole2 = QuadrupoleMaster.clone();
+			Quadrupole2.rotateX(-Math.PI / 2*i);
+			QuadrupoleContiner.add(Quadrupole2);
+		}
+		
+		QuadrupoleContiner.add(QuadrupoleMaster);
+		// QuadrupoleContiner.rotateX(Math.PI * 1.25);
+		QuadrupoleContiner.rotateY(Math.PI * 1.00);
+		QuadrupoleContiner.rotateZ(Math.PI * 1.00);
+
+		return QuadrupoleContiner;
+	}
diff --git a/components/src/rar1.js b/components/src/rar1.js
new file mode 100644
index 0000000000000000000000000000000000000000..5e33abcb3cac72e3a299f7e8fd485cd29e3293e0
--- /dev/null
+++ b/components/src/rar1.js
@@ -0,0 +1,56 @@
+	import * as THREE from 'three';
+
+
+	// rar1 rack
+	export function rar1(width=800, height=2500, depth=800) {
+		const kly_rackObject = new THREE.Object3D();
+	
+		const materialGreyDark= new THREE.MeshLambertMaterial({color: 0x9d9d9d});
+		const silvermaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		
+		// rack
+		const lrgeometry = new THREE.BoxGeometry(width, height, depth);
+		const lrmesh = new THREE.Mesh(lrgeometry, silvermaterial);
+		lrmesh.position.set(0 , 0 , 0);
+		kly_rackObject.add(lrmesh);
+		
+		//edge le		
+		const rlegeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const rlemesh = new THREE.Mesh(rlegeometry, materialGreyDark);
+		rlemesh.position.set( -425, 0 , -370);
+		kly_rackObject.add(rlemesh);	
+		
+		//edge re		
+		const rregeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const rremesh = new THREE.Mesh(rregeometry, materialGreyDark);
+		rremesh.position.set( -425, 0 , 375);
+		kly_rackObject.add(rremesh);		
+		
+		//edge ue		
+		const ruegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const ruemesh = new THREE.Mesh(ruegeometry, materialGreyDark);
+		ruemesh.position.set( -425, 1225 , 0);
+		kly_rackObject.add(ruemesh);			
+		
+		//edge de		
+		const rdegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const rdemesh = new THREE.Mesh(rdegeometry, materialGreyDark);
+		rdemesh.position.set( -425, -1230 , 0);
+		kly_rackObject.add(rdemesh);
+		
+		//base and texture
+   		const drawer1geometry = new THREE.BoxGeometry(10, 2450, 750);
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/rar1pic.jpg');
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(1, 1);
+		const material = new THREE.MeshBasicMaterial({ map: texture });
+		const gridgeometrymesh = new THREE.Mesh(drawer1geometry, material);
+		gridgeometrymesh.rotateX(Math.PI * 1);
+		gridgeometrymesh.rotateY(Math.PI * 1);
+		gridgeometrymesh.rotateZ(Math.PI * 1);
+		gridgeometrymesh.position.set( -400, 0 , 0);
+		kly_rackObject.add(gridgeometrymesh);			
+		
+		return kly_rackObject;
+	}
diff --git a/components/src/rar1premium.js b/components/src/rar1premium.js
new file mode 100644
index 0000000000000000000000000000000000000000..a1f60c56fbe962b5e516061905a845a46bf49956
--- /dev/null
+++ b/components/src/rar1premium.js
@@ -0,0 +1,68 @@
+	import * as THREE from 'three';
+
+
+	// rar1 rack
+	export function rar1premium(width=800, height=2500, depth=800) {
+		const kly_rackObject = new THREE.Object3D();
+	
+		const materialGreyDark= new THREE.MeshLambertMaterial({color: 0x9d9d9d});
+		const silvermaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const target = new THREE.MeshLambertMaterial({color: 0xfbe928});		
+		
+		// rack
+		const lrgeometry = new THREE.BoxGeometry(width, height, depth);
+		const lrmesh = new THREE.Mesh(lrgeometry, silvermaterial);
+		lrmesh.position.set(0 , 0 , 0);
+		kly_rackObject.add(lrmesh);
+		
+		//front yellow target
+		const Ftarget = new THREE.BoxGeometry(2, 90, 700);
+		const Ftargetmesh = new THREE.Mesh(Ftarget, target);
+		Ftargetmesh.position.set( -451, 1200 , -15);
+		kly_rackObject.add(Ftargetmesh);		
+		//Rear yellow target
+		const Rtarget = new THREE.BoxGeometry(2, 90, 700);
+		const Rtargetmesh = new THREE.Mesh(Rtarget, target);
+		Rtargetmesh.position.set( 401, 1200 , -15);
+		kly_rackObject.add(Rtargetmesh);			
+		
+		//edge le		
+		const rlegeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const rlemesh = new THREE.Mesh(rlegeometry, materialGreyDark);
+		rlemesh.position.set( -425, 0 , -370);
+		kly_rackObject.add(rlemesh);	
+		
+		//edge re		
+		const rregeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const rremesh = new THREE.Mesh(rregeometry, materialGreyDark);
+		rremesh.position.set( -425, 0 , 375);
+		kly_rackObject.add(rremesh);		
+		
+		//edge ue		
+		const ruegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const ruemesh = new THREE.Mesh(ruegeometry, materialGreyDark);
+		ruemesh.position.set( -425, 1225 , 0);
+		kly_rackObject.add(ruemesh);			
+		
+		//edge de		
+		const rdegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const rdemesh = new THREE.Mesh(rdegeometry, materialGreyDark);
+		rdemesh.position.set( -425, -1230 , 0);
+		kly_rackObject.add(rdemesh);
+		
+		//base and texture
+   		const drawer1geometry = new THREE.BoxGeometry(10, 2450, 750);
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/rar1texture.jpg');
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(1, 1);
+		const material = new THREE.MeshBasicMaterial({ map: texture });
+		const gridgeometrymesh = new THREE.Mesh(drawer1geometry, material);
+		gridgeometrymesh.rotateX(Math.PI * 1);
+		gridgeometrymesh.rotateY(Math.PI * 1);
+		gridgeometrymesh.rotateZ(Math.PI * 1);
+		gridgeometrymesh.position.set( -400, 0 , 0);
+		kly_rackObject.add(gridgeometrymesh);			
+		
+		return kly_rackObject;
+	}
diff --git a/components/src/rar2.js b/components/src/rar2.js
new file mode 100644
index 0000000000000000000000000000000000000000..5803f951fd2e6b1c4431af671b03ebec36bf091e
--- /dev/null
+++ b/components/src/rar2.js
@@ -0,0 +1,243 @@
+	import * as THREE from 'three';
+
+
+	// rar2 rack
+	export function rar2(width=800, height=2500, depth=800) {
+		const kly_rackObject = new THREE.Object3D();
+	
+		const materialGreyDark= new THREE.MeshLambertMaterial({color: 0x9d9d9d});
+		const materialGreyMedium= new THREE.MeshLambertMaterial({color: 0x636363});
+		const materialVeryGreyDark= new THREE.MeshLambertMaterial({color: 0x242424});
+		const silvermaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const greenmaterial = new THREE.MeshLambertMaterial({color: 0x17fc03});
+		const redmaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
+		const yellowmaterial = new THREE.MeshLambertMaterial({color: 0xcc9d02});
+		const target = new THREE.MeshLambertMaterial({color: 0xfbe928});
+		
+		//rack
+		const rrgeometry = new THREE.BoxGeometry(width, height, depth);
+		const rrmesh = new THREE.Mesh(rrgeometry, silvermaterial);
+		rrmesh.position.set( 0, 0 , -810);
+		kly_rackObject.add(rrmesh);	
+		
+		//front yellow target
+		const Ftarget = new THREE.BoxGeometry(2, 90, 700);
+		const Ftargetmesh = new THREE.Mesh(Ftarget, target);
+		Ftargetmesh.position.set( -451, 1200 , -815);
+		kly_rackObject.add(Ftargetmesh);		
+		//Rear yellow target
+		const Rtarget = new THREE.BoxGeometry(2, 90, 700);
+		const Rtargetmesh = new THREE.Mesh(Rtarget, target);
+		Rtargetmesh.position.set( 401, 1200 , -815);
+		kly_rackObject.add(Rtargetmesh);			
+		
+		//edge 	
+		const llegeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const llemesh = new THREE.Mesh(llegeometry, materialGreyDark);
+		llemesh.position.set( -425, 0 , -1185);
+		kly_rackObject.add(llemesh);
+		
+		//edge lre		
+		const lregeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const lremesh = new THREE.Mesh(lregeometry, materialGreyDark);
+		lremesh.position.set( -425, 0 , -430);
+		kly_rackObject.add(lremesh);		
+
+		//edge lue		
+		const luegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const luemesh = new THREE.Mesh(luegeometry, materialGreyDark);
+		luemesh.position.set( -425, 1225 , -807);
+		kly_rackObject.add(luemesh);		
+
+		//edge lde		
+		const ldegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const ldemesh = new THREE.Mesh(ldegeometry, materialGreyDark);
+		ldemesh.position.set( -425, -1230 , -807);
+		kly_rackObject.add(ldemesh);				
+
+		//drawer1		
+		const drawer1geometry = new THREE.BoxGeometry(10, 250, 630);
+		const drawer1geometrymesh = new THREE.Mesh(drawer1geometry, materialGreyDark);
+		drawer1geometrymesh.position.set( -400, 1000 , -810);
+		kly_rackObject.add(drawer1geometrymesh);
+		
+		//display1 left		
+		const display1leftgeometry = new THREE.BoxGeometry(50, 50, 150);
+		const display1leftgeometrygeometrymesh = new THREE.Mesh(display1leftgeometry, materialVeryGreyDark);
+		display1leftgeometrygeometrymesh.position.set( -400, 1050 , -1000);
+		kly_rackObject.add(display1leftgeometrygeometrymesh);			
+		
+		//display1 right		
+		const displayupgeometry2 = new THREE.BoxGeometry(50, 50, 150);
+		const displayupgeometrymesh2 = new THREE.Mesh(displayupgeometry2, materialVeryGreyDark);
+		displayupgeometrymesh2.position.set( -400, 1050 , -820);
+		kly_rackObject.add(displayupgeometrymesh2);
+		
+		//selector1		
+		const selector1geometry = new THREE.BoxGeometry(20, 70, 20);
+		const selector1geometrymesh = new THREE.Mesh(selector1geometry, materialVeryGreyDark);
+		selector1geometrymesh.position.set( -400, 940 , -1030);
+		selector1geometrymesh.rotateX(Math.PI * 1.75);
+		selector1geometrymesh.rotateY(Math.PI * 1.50);
+		selector1geometrymesh.rotateZ(Math.PI * 1.50);
+		kly_rackObject.add(selector1geometrymesh);
+		
+		//sfere selector1
+		const sphereselector1drawer1 = new THREE.SphereGeometry(20, 10, 10);
+		const sphereselector1drawer1mesh = new THREE.Mesh(sphereselector1drawer1, materialVeryGreyDark);
+		sphereselector1drawer1mesh.position.set(-400, 940 , -1030);		
+		kly_rackObject.add(sphereselector1drawer1mesh);
+		
+		//sfere drawer1 button1 
+		const spherebutton1drawer1 = new THREE.SphereGeometry(20, 10, 10);
+		const spherebutton1drawer1mesh = new THREE.Mesh(spherebutton1drawer1, materialVeryGreyDark);
+		spherebutton1drawer1mesh.position.set(-400, 990 , -630);		
+		kly_rackObject.add(spherebutton1drawer1mesh);	
+		
+		//sfere drawer1 button2 
+		const spherebutton2drawer1 = new THREE.SphereGeometry(20, 10, 10);
+		const spherebutton2drawer1mesh = new THREE.Mesh(spherebutton2drawer1, materialVeryGreyDark);
+		spherebutton2drawer1mesh.position.set(-400, 990 , -550);		
+		kly_rackObject.add(spherebutton2drawer1mesh);				
+	
+		//drawer2		
+		const drawer2geometry = new THREE.BoxGeometry(10, 250, 630);
+		const drawer2geometrymesh = new THREE.Mesh(drawer2geometry, materialGreyDark);
+		drawer2geometrymesh.position.set( -400, 700 , -810);
+		kly_rackObject.add(drawer2geometrymesh);
+		
+		//display2 left		
+		const display1leftgeometrydrawer2 = new THREE.BoxGeometry(50, 50, 150);
+		const display1leftgeometrygeometrydrawer2mesh = new THREE.Mesh(display1leftgeometrydrawer2, materialVeryGreyDark);
+		display1leftgeometrygeometrydrawer2mesh.position.set( -400, 750 , -1000);
+		kly_rackObject.add(display1leftgeometrygeometrydrawer2mesh);			
+		
+		//display2 right		
+		const display2leftgeometrydrawer2 = new THREE.BoxGeometry(50, 50, 150);
+		const display2leftgeometrygeometrydrawer2mesh = new THREE.Mesh(display2leftgeometrydrawer2, materialVeryGreyDark);
+		display2leftgeometrygeometrydrawer2mesh.position.set( -400, 750 , -820);
+		kly_rackObject.add(display2leftgeometrygeometrydrawer2mesh);
+		
+		//selector2		
+		const selector1geometrydrawer2 = new THREE.BoxGeometry(20, 70, 20);
+		const selector1geometrydrawer2mesh = new THREE.Mesh(selector1geometrydrawer2, materialVeryGreyDark);
+		selector1geometrydrawer2mesh.position.set( -400, 640 , -1030);
+		selector1geometrydrawer2mesh.rotateX(Math.PI * 1.75);
+		selector1geometrydrawer2mesh.rotateY(Math.PI * 1.50);
+		selector1geometrydrawer2mesh.rotateZ(Math.PI * 1.50);
+		kly_rackObject.add(selector1geometrydrawer2mesh);
+		
+		//sfere selector2
+		const sphereselector1drawer2 = new THREE.SphereGeometry(20, 10, 10);
+		const sphereselector1drawer2mesh = new THREE.Mesh(sphereselector1drawer2, materialVeryGreyDark);
+		sphereselector1drawer2mesh.position.set(-400, 640 , -1030);		
+		kly_rackObject.add(sphereselector1drawer2mesh);
+		
+		//sfere drawer2 button1 
+		const spherebutton1drawer2 = new THREE.SphereGeometry(20, 10, 10);
+		const spherebutton1drawer2mesh = new THREE.Mesh(spherebutton1drawer2, materialVeryGreyDark);
+		spherebutton1drawer2mesh.position.set(-400, 690 , -630);		
+		kly_rackObject.add(spherebutton1drawer2mesh);	
+		
+		//sfere drawer2 button2 
+		const spherebutton2drawer2 = new THREE.SphereGeometry(20, 10, 10);
+		const spherebutton2drawer2mesh = new THREE.Mesh(spherebutton2drawer2, materialVeryGreyDark);
+		spherebutton2drawer2mesh.position.set(-400, 690 , -550);		
+		kly_rackObject.add(spherebutton2drawer2mesh);	
+		
+		//drawer3		
+		const drawer3geometry = new THREE.BoxGeometry(10, 250, 630);
+		const drawer3geometrymesh = new THREE.Mesh(drawer3geometry, materialGreyDark);
+		drawer3geometrymesh.position.set( -400, 400 , -810);
+		kly_rackObject.add(drawer3geometrymesh);
+		
+		//display2 left		
+		const display1leftgeometrydrawer3 = new THREE.BoxGeometry(50, 50, 150);
+		const display1leftgeometrygeometrydrawer3mesh = new THREE.Mesh(display1leftgeometrydrawer3, materialVeryGreyDark);
+		display1leftgeometrygeometrydrawer3mesh.position.set( -400, 450 , -1000);
+		kly_rackObject.add(display1leftgeometrygeometrydrawer3mesh);			
+		
+		//display2 right		
+		const display2leftgeometrydrawer3 = new THREE.BoxGeometry(50, 50, 150);
+		const display2leftgeometrygeometrydrawer3mesh = new THREE.Mesh(display2leftgeometrydrawer3, materialVeryGreyDark);
+		display2leftgeometrygeometrydrawer3mesh.position.set( -400, 450 , -820);
+		kly_rackObject.add(display2leftgeometrygeometrydrawer3mesh);
+		
+		//selector2		
+		const selector1geometrydrawer3 = new THREE.BoxGeometry(20, 70, 20);
+		const selector1geometrydrawer3mesh = new THREE.Mesh(selector1geometrydrawer3, materialVeryGreyDark);
+		selector1geometrydrawer3mesh.position.set( -400, 340 , -1030);
+		selector1geometrydrawer3mesh.rotateX(Math.PI * 1.75);
+		selector1geometrydrawer3mesh.rotateY(Math.PI * 1.50);
+		selector1geometrydrawer3mesh.rotateZ(Math.PI * 1.50);
+		kly_rackObject.add(selector1geometrydrawer3mesh);
+		
+		//sfere selector2
+		const sphereselector1drawer3 = new THREE.SphereGeometry(20, 10, 10);
+		const sphereselector1drawer3mesh = new THREE.Mesh(sphereselector1drawer3, materialVeryGreyDark);
+		sphereselector1drawer3mesh.position.set(-400, 340 , -1030);		
+		kly_rackObject.add(sphereselector1drawer3mesh);
+		
+		//sfere drawer2 button1 
+		const spherebutton1drawer3 = new THREE.SphereGeometry(20, 10, 10);
+		const spherebutton1drawer3mesh = new THREE.Mesh(spherebutton1drawer3, materialVeryGreyDark);
+		spherebutton1drawer3mesh.position.set(-400, 390 , -630);		
+		kly_rackObject.add(spherebutton1drawer3mesh);	
+		
+		//sfere drawer2 button2 
+		const spherebutton2drawer3 = new THREE.SphereGeometry(20, 10, 10);
+		const spherebutton2drawer3mesh = new THREE.Mesh(spherebutton2drawer3, materialVeryGreyDark);
+		spherebutton2drawer3mesh.position.set(-400, 390 , -550);		
+		kly_rackObject.add(spherebutton2drawer3mesh);	
+		
+		//borderscreen	
+		const borderscreengeometry = new THREE.BoxGeometry(10, 400, 500);
+		const borderscreengeometrymesh = new THREE.Mesh(borderscreengeometry, materialGreyDark);
+		borderscreengeometrymesh.position.set( -400, 0 , -810);
+		kly_rackObject.add(borderscreengeometrymesh);
+		
+		//screen	
+		const screengeometry = new THREE.BoxGeometry(10, 300, 400);
+		const screengeometrymesh = new THREE.Mesh(screengeometry, materialVeryGreyDark);
+		screengeometrymesh.position.set( -402, 0 , -810);
+		kly_rackObject.add(screengeometrymesh);	
+		
+		//GreenLed1
+		const greenled1 = new THREE.SphereGeometry(13, 10, 10);
+		const greenled1mesh = new THREE.Mesh(greenled1, greenmaterial);
+		greenled1mesh.position.set(-400, 175 , -750);		
+		kly_rackObject.add(greenled1mesh);	
+		
+		//GreenLed2
+		const greenled2 = new THREE.SphereGeometry(13, 10, 10);
+		const greenled2mesh = new THREE.Mesh(greenled2, greenmaterial);
+		greenled2mesh.position.set(-400, 175 , -700);		
+		kly_rackObject.add(greenled2mesh);
+		
+	
+		//borderEC
+		const borderECgeometry = new THREE.BoxGeometry(10, 400, 600);
+		const borderECgeometrymesh = new THREE.Mesh(borderECgeometry, materialGreyDark);
+		borderECgeometrymesh.position.set( -400, -650 , -810);
+		kly_rackObject.add(borderECgeometrymesh);
+		
+		//EC1
+		const EC1geometry = new THREE.BoxGeometry(10, 350, 40);
+		const EC1geometrymesh = new THREE.Mesh(EC1geometry, materialGreyMedium);
+		EC1geometrymesh.position.set( -402, -650 , -1000);
+		kly_rackObject.add(EC1geometrymesh);			
+		//EC2
+		const EC2geometry = new THREE.BoxGeometry(10, 350, 40);
+		const EC2geometrymesh = new THREE.Mesh(EC2geometry, materialGreyMedium);
+		EC2geometrymesh.position.set( -402, -650 , -950);
+		kly_rackObject.add(EC2geometrymesh);			
+		//EC2
+		const EC3geometry = new THREE.BoxGeometry(10, 350, 40);
+		const EC3geometrymesh = new THREE.Mesh(EC3geometry, materialGreyMedium);
+		EC3geometrymesh.position.set( -402, -650 , -900);
+		kly_rackObject.add(EC3geometrymesh);	
+		
+
+		
+		return kly_rackObject;
+	}
diff --git a/components/src/rar2premium.js b/components/src/rar2premium.js
new file mode 100644
index 0000000000000000000000000000000000000000..561d269b2a6ddb40b07e6110549ca2809297ae41
--- /dev/null
+++ b/components/src/rar2premium.js
@@ -0,0 +1,69 @@
+	import * as THREE from 'three';
+
+
+	// rar2 rack
+	export function rar2premium(width=800, height=2500, depth=800) {
+		const kly_rackObject = new THREE.Object3D();
+	
+		const materialGreyDark= new THREE.MeshLambertMaterial({color: 0x9d9d9d});
+		const silvermaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const target = new THREE.MeshLambertMaterial({color: 0xfbe928});
+
+		//front yellow target
+		const Ftarget = new THREE.BoxGeometry(2, 90, 700);
+		const Ftargetmesh = new THREE.Mesh(Ftarget, target);
+		Ftargetmesh.position.set( -451, 1200 , -15);
+		kly_rackObject.add(Ftargetmesh);		
+		//Rear yellow target
+		const Rtarget = new THREE.BoxGeometry(2, 90, 700);
+		const Rtargetmesh = new THREE.Mesh(Rtarget, target);
+		Rtargetmesh.position.set( 401, 1200 , -15);
+		kly_rackObject.add(Rtargetmesh);
+		
+		
+		// rack
+		const lrgeometry = new THREE.BoxGeometry(width, height, depth);
+		const lrmesh = new THREE.Mesh(lrgeometry, silvermaterial);
+		lrmesh.position.set(0 , 0 , 0);
+		kly_rackObject.add(lrmesh);
+		
+		//edge le		
+		const rlegeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const rlemesh = new THREE.Mesh(rlegeometry, materialGreyDark);
+		rlemesh.position.set( -425, 0 , -370);
+		kly_rackObject.add(rlemesh);	
+		
+		//edge re		
+		const rregeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const rremesh = new THREE.Mesh(rregeometry, materialGreyDark);
+		rremesh.position.set( -425, 0 , 375);
+		kly_rackObject.add(rremesh);		
+		
+		//edge ue		
+		const ruegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const ruemesh = new THREE.Mesh(ruegeometry, materialGreyDark);
+		ruemesh.position.set( -425, 1225 , 0);
+		kly_rackObject.add(ruemesh);			
+		
+		//edge de		
+		const rdegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const rdemesh = new THREE.Mesh(rdegeometry, materialGreyDark);
+		rdemesh.position.set( -425, -1230 , 0);
+		kly_rackObject.add(rdemesh);
+		
+		//base and texture
+   		const drawer1geometry = new THREE.BoxGeometry(10, 2450, 750);
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/rar2texture.jpg');
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(1, 1);
+		const material = new THREE.MeshBasicMaterial({ map: texture });
+		const gridgeometrymesh = new THREE.Mesh(drawer1geometry, material);
+		gridgeometrymesh.rotateX(Math.PI * 1);
+		gridgeometrymesh.rotateY(Math.PI * 1);
+		gridgeometrymesh.rotateZ(Math.PI * 1);
+		gridgeometrymesh.position.set( -400, 0 , 0);
+		kly_rackObject.add(gridgeometrymesh);			
+		
+		return kly_rackObject;
+	}
diff --git a/components/src/rid.js b/components/src/rid.js
new file mode 100644
index 0000000000000000000000000000000000000000..18767628ac4a277adbeeaad7f104f4c2fc15db49
--- /dev/null
+++ b/components/src/rid.js
@@ -0,0 +1,154 @@
+	import * as THREE from 'three';
+
+
+	// fug rack
+	export function rid(width=800, height=1900, depth=600) {
+		const id_rackObject = new THREE.Object3D();
+	
+		const materialGreyDark= new THREE.MeshLambertMaterial({color: 0x9d9d9d});
+		const materialGreyMedium= new THREE.MeshLambertMaterial({color: 0x636363});
+		const materialVeryGreyDark= new THREE.MeshLambertMaterial({color: 0x242424});
+		const silvermaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const greenmaterial = new THREE.MeshLambertMaterial({color: 0x17fc03});
+		const redmaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
+		const yellowmaterial = new THREE.MeshLambertMaterial({color: 0xcc9d02});
+		const whitematerial = new THREE.MeshLambertMaterial({color: 0xffffff});
+		const materialDarkblue = new THREE.MeshLambertMaterial({color: 0x021061});
+		const materialThightblue = new THREE.MeshLambertMaterial({color: 0x96a5fa});
+		const materialviolet = new THREE.MeshLambertMaterial({color: 0xa425b8});
+		const blackmaterial = new THREE.MeshLambertMaterial({color: 0x000000});
+		const target = new THREE.MeshLambertMaterial({color: 0xfbe928});
+		
+		//rack
+		const rgeometry = new THREE.BoxGeometry(width, height, depth);
+		const rmesh = new THREE.Mesh(rgeometry, silvermaterial);
+		rmesh.position.set(0 , 0 , 0);
+		id_rackObject.add(rmesh);
+		
+		//screen border	
+		const screenbordergeometry = new THREE.BoxGeometry(10, 250, 350);
+		const screenbordergeometrymesh = new THREE.Mesh(screenbordergeometry, whitematerial);
+		screenbordergeometrymesh.position.set( -400, 500 , 0);
+		id_rackObject.add(screenbordergeometrymesh);
+		
+		//screen 	
+		const screengeometry = new THREE.BoxGeometry(10, 200, 300);
+		const screengeometrymesh = new THREE.Mesh(screengeometry, materialDarkblue);
+		screengeometrymesh.position.set( -401, 500 , 0);
+		id_rackObject.add(screengeometrymesh);		
+		
+		//wiendow screen 	
+		const screenwindowgeometry = new THREE.BoxGeometry(10, 150, 150);
+		const screenwindowgeometrymesh = new THREE.Mesh(screenwindowgeometry, materialThightblue);
+		screenwindowgeometrymesh.position.set( -402, 500 , -40);
+		id_rackObject.add(screenwindowgeometrymesh);	
+		
+		//window screen green button	
+		const screenwindowgreenbuttongeometry = new THREE.BoxGeometry(10, 25, 35);
+		const screenwindowgreenbuttongeometryymesh = new THREE.Mesh(screenwindowgreenbuttongeometry, greenmaterial);
+		screenwindowgreenbuttongeometryymesh.position.set( -403, 540 , -80);
+		id_rackObject.add(screenwindowgreenbuttongeometryymesh);
+		
+		//window screen violet button	
+		const screenwindowvioletbuttongeometry = new THREE.BoxGeometry(10, 25, 35);
+		const screenwindowvioletbuttongeometryymesh = new THREE.Mesh(screenwindowvioletbuttongeometry, materialviolet);
+		screenwindowvioletbuttongeometryymesh.position.set( -403, 510 , -80);
+		id_rackObject.add(screenwindowvioletbuttongeometryymesh);	
+		
+		//window screen blu button	
+		const screenwindowblubuttongeometry = new THREE.BoxGeometry(10, 25, 35);
+		const screenwindowblubuttongeometryymesh = new THREE.Mesh(screenwindowblubuttongeometry, materialDarkblue);
+		screenwindowblubuttongeometryymesh.position.set( -403, 480 , -80);
+		id_rackObject.add(screenwindowblubuttongeometryymesh);		
+		
+		//key		
+		const keygeometry = new THREE.BoxGeometry(50, 200, 50);
+		const keygeometrymesh = new THREE.Mesh(keygeometry, whitematerial);
+		keygeometrymesh.position.set( -400, -400 , -250);
+		id_rackObject.add(keygeometrymesh);
+		//key2		
+		const key2geometry = new THREE.CylinderGeometry(15, 15, 15, 15);
+		const key2geometrymesh = new THREE.Mesh(key2geometry, materialGreyMedium);
+		key2geometrymesh.rotateX(Math.PI * 0.5);
+		key2geometrymesh.rotateY(Math.PI * 1);
+		key2geometrymesh.rotateZ(Math.PI * 0.5);		
+		key2geometrymesh.position.set(-421, -400 , -250);		
+		id_rackObject.add(key2geometrymesh);	
+	
+		//whitebutton1
+		const whitebutton = new THREE.CylinderGeometry(30, 30, 30, 15);
+		const whitebuttonmesh = new THREE.Mesh(whitebutton, whitematerial);
+		whitebuttonmesh.rotateX(Math.PI * 0.5);
+		whitebuttonmesh.rotateY(Math.PI * 1);
+		whitebuttonmesh.rotateZ(Math.PI * 0.5);		
+		whitebuttonmesh.position.set(-405, 200 , -200);		
+		id_rackObject.add(whitebuttonmesh);			
+
+		//blackbutton1
+		const blackbutton1 = new THREE.CylinderGeometry(30, 30, 30, 15);
+		const blackbutton1mesh = new THREE.Mesh(blackbutton1, materialVeryGreyDark);
+		blackbutton1mesh.rotateX(Math.PI * 0.5);
+		blackbutton1mesh.rotateY(Math.PI * 1);
+		blackbutton1mesh.rotateZ(Math.PI * 0.5);		
+		blackbutton1mesh.position.set(-405, 200 , -100);		
+		id_rackObject.add(blackbutton1mesh);
+		
+		//blackbutton2
+		const blackbutton2 = new THREE.CylinderGeometry(30, 30, 30, 15);
+		const blackbutton2mesh = new THREE.Mesh(blackbutton2, materialVeryGreyDark);
+		blackbutton2mesh.rotateX(Math.PI * 0.5);
+		blackbutton2mesh.rotateY(Math.PI * 1);
+		blackbutton2mesh.rotateZ(Math.PI * 0.5);		
+		blackbutton2mesh.position.set(-405, 200 , 0);		
+		id_rackObject.add(blackbutton2mesh);	
+		
+		//blackbutton3
+		const blackbutton3 = new THREE.CylinderGeometry(30, 30, 30, 15);
+		const blackbutton3mesh = new THREE.Mesh(blackbutton3, materialVeryGreyDark);
+		blackbutton3mesh.rotateX(Math.PI * 0.5);
+		blackbutton3mesh.rotateY(Math.PI * 1);
+		blackbutton3mesh.rotateZ(Math.PI * 0.5);		
+		blackbutton3mesh.position.set(-405, 200 , 100);		
+		id_rackObject.add(blackbutton3mesh);
+		
+		//yellowbutton
+		const yellowbutton = new THREE.CylinderGeometry(30, 30, 30, 15);
+		const yellowbuttonmesh = new THREE.Mesh(yellowbutton, yellowmaterial);
+		yellowbuttonmesh.rotateX(Math.PI * 0.5);
+		yellowbuttonmesh.rotateY(Math.PI * 1);
+		yellowbuttonmesh.rotateZ(Math.PI * 0.5);		
+		yellowbuttonmesh.position.set(-405, 200 , 200);		
+		id_rackObject.add(yellowbuttonmesh);		
+		
+		//emergencybutton yellow 
+		const emergencybuttonyellow = new THREE.CylinderGeometry(70, 70, 5, 15);
+		const emergencybuttonyellowmesh = new THREE.Mesh(emergencybuttonyellow, yellowmaterial);
+		emergencybuttonyellowmesh.rotateX(Math.PI * 0.5);
+		emergencybuttonyellowmesh.rotateY(Math.PI * 1);
+		emergencybuttonyellowmesh.rotateZ(Math.PI * 0.5);		
+		emergencybuttonyellowmesh.position.set(-403, 50 , 150);		
+		id_rackObject.add(emergencybuttonyellowmesh);				
+		
+		//emergencybutton red  
+		const emergencybutton = new THREE.CylinderGeometry(50, 50, 30, 15);
+		const emergencybuttonmesh = new THREE.Mesh(emergencybutton, redmaterial);
+		emergencybuttonmesh.rotateX(Math.PI * 0.5);
+		emergencybuttonmesh.rotateY(Math.PI * 1);
+		emergencybuttonmesh.rotateZ(Math.PI * 0.5);		
+		emergencybuttonmesh.position.set(-405, 50 , 150);		
+		id_rackObject.add(emergencybuttonmesh);	
+		
+		//front yellow target
+		const Ftarget = new THREE.BoxGeometry(2, 90, 500);
+		const Ftargetmesh = new THREE.Mesh(Ftarget, target);
+		Ftargetmesh.position.set( -451, 900 , -15);
+		id_rackObject.add(Ftargetmesh);		
+		//Rear yellow target
+		const Rtarget = new THREE.BoxGeometry(2, 90, 500);
+		const Rtargetmesh = new THREE.Mesh(Rtarget, target);
+		Rtargetmesh.position.set( 401, 900 , -15);
+		id_rackObject.add(Rtargetmesh);
+		
+	
+		return id_rackObject;
+	}
diff --git a/components/src/ridpremium.js b/components/src/ridpremium.js
new file mode 100644
index 0000000000000000000000000000000000000000..fccdae8dcff7a4ba137101a3af39eca34bd8de75
--- /dev/null
+++ b/components/src/ridpremium.js
@@ -0,0 +1,46 @@
+	import * as THREE from 'three';
+
+	// ID rack
+	export function ridpremium(width=800, height=1900, depth=600) {
+		const id_rackObject = new THREE.Object3D();
+	
+		const silvermaterial = new THREE.MeshLambertMaterial({color: 0xc5c2bd});
+		const target = new THREE.MeshLambertMaterial({color: 0xfbe928});
+
+		//rack
+		const geometry = new THREE.BoxGeometry(width, height, depth);
+		const rackmesh = new THREE.Mesh(geometry, silvermaterial);
+		rackmesh.position.set( 0, 0 , 0);
+		id_rackObject.add(rackmesh);	
+		
+		//front yellow target
+		const Ftarget = new THREE.BoxGeometry(2, 90, 500);
+		const Ftargetmesh = new THREE.Mesh(Ftarget, target);
+		Ftargetmesh.position.set( -401, 900 , -15);
+		id_rackObject.add(Ftargetmesh);
+		
+		//Rear yellow target
+		const Rtarget = new THREE.BoxGeometry(2, 90, 500);
+		const Rtargetmesh = new THREE.Mesh(Rtarget, target);
+		Rtargetmesh.position.set( 401, 900 , -15);
+		id_rackObject.add(Rtargetmesh);	
+		
+		//base and build texture
+		const drawer1geometry = new THREE.BoxGeometry(2, height, width-200);
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/idscreenfoto.jpg');
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(1, 1);
+		const material = new THREE.MeshBasicMaterial({ map: texture });
+		const gridgeometrymesh = new THREE.Mesh(drawer1geometry, material);
+		gridgeometrymesh.rotateX(Math.PI * 1);
+		gridgeometrymesh.rotateY(Math.PI * 1);
+		gridgeometrymesh.rotateZ(Math.PI * 1);
+		gridgeometrymesh.position.set( -400, 0 , 0);
+		id_rackObject.add(gridgeometrymesh);			
+		
+		return id_rackObject;
+	}
+		
+	
+	
diff --git a/components/src/rps.js b/components/src/rps.js
new file mode 100644
index 0000000000000000000000000000000000000000..cd69f3d7dbd2cbeee8ca1c6caeba50fdb45a0720
--- /dev/null
+++ b/components/src/rps.js
@@ -0,0 +1,141 @@
+	import * as THREE from 'three';
+
+
+	// PS rack
+	export function rps(width=800, height=2500, depth=600) {
+		const rps_rackObject = new THREE.Object3D();
+		const psObject = new THREE.Object3D();
+	
+		const materialGreyDark= new THREE.MeshLambertMaterial({color: 0x9d9d9d});
+		const materialGreyMedium= new THREE.MeshLambertMaterial({color: 0x636363});
+		const materialVeryGreyDark= new THREE.MeshLambertMaterial({color: 0x242424});
+		const silvermaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const greenmaterial = new THREE.MeshLambertMaterial({color: 0x17fc03});
+		const whitematerial = new THREE.MeshLambertMaterial({color: 0xffffff});
+		const redmaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
+		const bluematerial = new THREE.MeshLambertMaterial({color: 0x0053d9});
+		const softbluematerial = new THREE.MeshLambertMaterial({color: 0x2b7cff});
+		const screenmaterial = new THREE.MeshLambertMaterial({color: 0xdeebff});
+		const target = new THREE.MeshLambertMaterial({color: 0xfbe928});
+		
+		// rack
+		const rrgeometry = new THREE.BoxGeometry(width, height, depth);
+		const rrmesh = new THREE.Mesh(rrgeometry, softbluematerial);
+		rrmesh.position.set( 0, 0 , 0);
+		rps_rackObject.add(rrmesh);		
+		
+		//edge le	
+		const llegeometry = new THREE.BoxGeometry(width-750, height, depth-550);
+		const llemesh = new THREE.Mesh(llegeometry, bluematerial);
+		llemesh.position.set( -425, 0 , -285);
+		rps_rackObject.add(llemesh);
+		
+		//edge re		
+		const lregeometry = new THREE.BoxGeometry(width-750, height, depth-550);
+		const lremesh = new THREE.Mesh(lregeometry, bluematerial);
+		lremesh.position.set( -425, 0 , 265);
+		rps_rackObject.add(lremesh);		
+
+		//edge ue		
+		const luegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const luemesh = new THREE.Mesh(luegeometry, bluematerial);
+		luemesh.position.set( -425, 1225 , -7);
+		rps_rackObject.add(luemesh);		
+
+		//edge de		
+		const ldegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const ldemesh = new THREE.Mesh(ldegeometry, bluematerial);
+		ldemesh.position.set( -425, -1230 , -7);
+		rps_rackObject.add(ldemesh);				
+
+		//front yellow target
+		const Ftarget = new THREE.BoxGeometry(2, 90, 500);
+		const Ftargetmesh = new THREE.Mesh(Ftarget, target);
+		Ftargetmesh.position.set( -451, 1200 , -15);
+		rps_rackObject.add(Ftargetmesh);		
+		//Rear yellow target
+		const Rtarget = new THREE.BoxGeometry(2, 90, 500);
+		const Rtargetmesh = new THREE.Mesh(Rtarget, target);
+		Rtargetmesh.position.set( 401, 1200 , -15);
+		rps_rackObject.add(Rtargetmesh);				
+	
+		// START PS base RED 
+		const basered = new THREE.BoxGeometry(10, 30, 110);
+		const baseredmesh = new THREE.Mesh(basered, redmaterial);
+		baseredmesh.position.set( -401, 1100 , -170);
+		psObject.add(baseredmesh);
+		
+		//  PS base BLUE 
+		const baseblue = new THREE.BoxGeometry(10, 180, 110);
+		const basebluemesh = new THREE.Mesh(baseblue, bluematerial);
+		basebluemesh.position.set( -401, 995 , -170);
+		psObject.add(basebluemesh);			
+
+		//  PS base SILVER 
+		const basesilver = new THREE.BoxGeometry(10, 150, 500);
+		const basesilvermesh = new THREE.Mesh(basesilver, silvermaterial);
+		basesilvermesh.position.set( -401, -300 , 0);
+		rps_rackObject.add(basesilvermesh);			
+		
+		rps_rackObject.add(psObject);
+		
+		//CLONE PS 
+
+		const psA2 = psObject.clone();
+		psA2.position.set( 0, 0 , 120);
+		rps_rackObject.add(psA2);
+		
+		const psA3 = psObject.clone();
+		psA3.position.set( 0, 0 , 240);
+		rps_rackObject.add(psA3);	
+		
+		const psB1 = psObject.clone();
+		psB1.position.set( 0, -220 , 0);
+		rps_rackObject.add(psB1);
+		
+		const psB2 = psObject.clone();
+		psB2.position.set( 0, -220 , 120);
+		rps_rackObject.add(psB2);
+		
+		const psB3 = psObject.clone();
+		psB3.position.set( 0, -220 , 240);
+		rps_rackObject.add(psB3);
+		
+		const psC1 = psObject.clone();
+		psC1.position.set( 0, -440 , 0);
+		rps_rackObject.add(psC1);
+		
+		const psC2 = psObject.clone();
+		psC2.position.set( 0, -440 , 120);
+		rps_rackObject.add(psC2);
+		
+		const psC3 = psObject.clone();
+		psC3.position.set( 0, -440 , 240);
+		rps_rackObject.add(psC3);
+		
+		const psD1 = psObject.clone();
+		psD1.position.set( 0, -660 , 0);
+		rps_rackObject.add(psD1);
+		
+		const psD2 = psObject.clone();
+		psD2.position.set( 0, -660 , 120);
+		rps_rackObject.add(psD2);
+		
+		const psD3 = psObject.clone();
+		psD3.position.set( 0, -660 , 240);
+		rps_rackObject.add(psD3);	
+		
+		const psE1 = psObject.clone();
+		psE1.position.set( 0, -880 , 0);
+		rps_rackObject.add(psE1);
+		
+		const psE2 = psObject.clone();
+		psE2.position.set( 0, -880 , 120);
+		rps_rackObject.add(psE2);
+		
+		const psE3 = psObject.clone();
+		psE3.position.set( 0, -880 , 240);
+		rps_rackObject.add(psE3);		
+		
+		return rps_rackObject;
+	}
diff --git a/components/src/rpspremium.js b/components/src/rpspremium.js
new file mode 100644
index 0000000000000000000000000000000000000000..a43f6343e00e3da73844246cfbd7c19e32f1684b
--- /dev/null
+++ b/components/src/rpspremium.js
@@ -0,0 +1,69 @@
+	import * as THREE from 'three';
+
+
+	// PS rack
+	export function rpspremium(width=800, height=2500, depth=600) {
+		const rps_rackObject = new THREE.Object3D();
+	
+		const bluematerial = new THREE.MeshLambertMaterial({color: 0x0053d9});
+		const softbluematerial = new THREE.MeshLambertMaterial({color: 0x2b7cff});
+		const target = new THREE.MeshLambertMaterial({color: 0xfbe928});
+		
+		// rack
+		const rrgeometry = new THREE.BoxGeometry(width, height, depth);
+		const rrmesh = new THREE.Mesh(rrgeometry, softbluematerial);
+		rrmesh.position.set( 0, 0 , -10);
+		rps_rackObject.add(rrmesh);		
+		
+		//front yellow target
+		const Ftarget = new THREE.BoxGeometry(2, 90, 500);
+		const Ftargetmesh = new THREE.Mesh(Ftarget, target);
+		Ftargetmesh.position.set( -451, 1200 , -15);
+		rps_rackObject.add(Ftargetmesh);		
+		//Rear yellow target
+		const Rtarget = new THREE.BoxGeometry(2, 90, 500);
+		const Rtargetmesh = new THREE.Mesh(Rtarget, target);
+		Rtargetmesh.position.set( 401, 1200 , -15);
+		rps_rackObject.add(Rtargetmesh);			
+		
+		//edge le	
+		const llegeometry = new THREE.BoxGeometry(width-750, height, depth-550);
+		const llemesh = new THREE.Mesh(llegeometry, bluematerial);
+		llemesh.position.set( -425, 0 , -285);
+		rps_rackObject.add(llemesh);
+		
+		//edge re		
+		const lregeometry = new THREE.BoxGeometry(width-750, height, depth-550);
+		const lremesh = new THREE.Mesh(lregeometry, bluematerial);
+		lremesh.position.set( -425, 0 , 265);
+		rps_rackObject.add(lremesh);		
+
+		//edge ue		
+		const luegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const luemesh = new THREE.Mesh(luegeometry, bluematerial);
+		luemesh.position.set( -425, 1225 , -7);
+		rps_rackObject.add(luemesh);		
+
+		//edge de		
+		const ldegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const ldemesh = new THREE.Mesh(ldegeometry, bluematerial);
+		ldemesh.position.set( -425, -1230 , -7);
+		rps_rackObject.add(ldemesh);				
+
+	
+		//base and build texture
+		const drawer1geometry = new THREE.BoxGeometry(10, 2450, 550);
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/rpsscreenfoto.jpg');
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(1, 1);
+		const material = new THREE.MeshBasicMaterial({ map: texture });
+		const gridgeometrymesh = new THREE.Mesh(drawer1geometry, material);
+		gridgeometrymesh.rotateX(Math.PI * 1);
+		gridgeometrymesh.rotateY(Math.PI * 1);
+		gridgeometrymesh.rotateZ(Math.PI * 1);
+		gridgeometrymesh.position.set( -400, 0 , -10);
+		rps_rackObject.add(gridgeometrymesh);			
+		
+		return rps_rackObject;
+	}
diff --git a/components/src/rv.js b/components/src/rv.js
new file mode 100644
index 0000000000000000000000000000000000000000..46cca57cf067df73fffefe059a17f5fa80c3dd24
--- /dev/null
+++ b/components/src/rv.js
@@ -0,0 +1,187 @@
+	import * as THREE from 'three';
+
+
+	// Vacuum rack
+	export function rv(width=800, height=2500, depth=800) {
+		const rv_rackObject = new THREE.Object3D();
+		const pspump_rackObject = new THREE.Object3D();
+		
+		const materialGreyDark= new THREE.MeshLambertMaterial({color: 0x9d9d9d});
+		const materialGreyMedium= new THREE.MeshLambertMaterial({color: 0x636363});
+		const materialVeryGreyDark= new THREE.MeshLambertMaterial({color: 0x242424});
+		const silvermaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const greenmaterial = new THREE.MeshLambertMaterial({color: 0x17fc03});
+		const whitematerial = new THREE.MeshLambertMaterial({color: 0xffffff});
+		const bluematerial = new THREE.MeshLambertMaterial({color: 0x0053d9});
+		const softbluematerial = new THREE.MeshLambertMaterial({color: 0x2b7cff});
+		const screenmaterial = new THREE.MeshLambertMaterial({color: 0xdeebff});
+		const target = new THREE.MeshLambertMaterial({color: 0xfbe928});
+		
+		// rack
+		const rrgeometry = new THREE.BoxGeometry(width, height, depth);
+		const rrmesh = new THREE.Mesh(rrgeometry, softbluematerial);
+		rrmesh.position.set( 0, 0 , 0);
+		rv_rackObject.add(rrmesh);		
+		
+		//front yellow tag
+		const Ftarget = new THREE.BoxGeometry(2, 90, 600);
+		const Ftargetmesh = new THREE.Mesh(Ftarget, target);
+		Ftargetmesh.position.set( -451, 1200 , -5);
+		rv_rackObject.add(Ftargetmesh);		
+		//Rear yellow tag
+		const Rtarget = new THREE.BoxGeometry(2, 90, 600);
+		const Rtargetmesh = new THREE.Mesh(Rtarget, target);
+		Rtargetmesh.position.set( 401, 1200 , -5);
+		rv_rackObject.add(Rtargetmesh);				
+		
+		//edge lle	
+		const llegeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const llemesh = new THREE.Mesh(llegeometry, bluematerial);
+		llemesh.position.set( -425, 0 , -365);
+		rv_rackObject.add(llemesh);
+		
+		//edge lre		
+		const lregeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const lremesh = new THREE.Mesh(lregeometry, bluematerial);
+		lremesh.position.set( -425, 0 , 380);
+		rv_rackObject.add(lremesh);		
+
+		//edge lue		
+		const luegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const luemesh = new THREE.Mesh(luegeometry, bluematerial);
+		luemesh.position.set( -425, 1225 , 3);
+		rv_rackObject.add(luemesh);		
+
+		//edge lde		
+		const ldegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const ldemesh = new THREE.Mesh(ldegeometry, bluematerial);
+		ldemesh.position.set( -425, -1230 , 3);
+		rv_rackObject.add(ldemesh);				
+		//silverbase		
+		const drawer1geometry = new THREE.BoxGeometry(10, 2450, 750);
+		const drawer1geometrymesh = new THREE.Mesh(drawer1geometry, silvermaterial);
+		drawer1geometrymesh.position.set( -400, 0 , -10);
+		rv_rackObject.add(drawer1geometrymesh);
+		
+		//base PS ionic Pump
+		const baseionicpump = new THREE.BoxGeometry(10, 250, 300);
+		const baseionicpumpmesh = new THREE.Mesh(baseionicpump, whitematerial);
+		baseionicpumpmesh.position.set( -401, 900 , -150);
+		pspump_rackObject.add(baseionicpumpmesh);		
+
+		//sceen PS ionic Pump
+		const screenionicpump = new THREE.BoxGeometry(10, 60, 180);
+		const screenionicpumpmesh = new THREE.Mesh(screenionicpump, screenmaterial);
+		screenionicpumpmesh.position.set( -402, 950 , -150);
+		pspump_rackObject.add(screenionicpumpmesh);			
+		
+		//button ON OFF PS ionic Pump
+		const buttonionicpump = new THREE.BoxGeometry(10, 50, 30);
+		const buttonionicpumpmesh = new THREE.Mesh(buttonionicpump, materialVeryGreyDark);
+		buttonionicpumpmesh.position.set( -402, 830 , -250);
+		pspump_rackObject.add(buttonionicpumpmesh);	
+		
+		//button ON Details 
+		const I = new THREE.BoxGeometry(3, 12, 3);
+		const IMesh = new THREE.Mesh(I, whitematerial);
+		IMesh.position.set( -407, 844 , -250);
+		pspump_rackObject.add(IMesh);	
+		
+		//button OFF Details 
+		const OI1 = new THREE.CylinderGeometry(8, 8, 2, 15);
+		const OI1Mesh = new THREE.Mesh(OI1, whitematerial);
+		OI1Mesh.rotateX(Math.PI * 0.5);
+		OI1Mesh.rotateY(Math.PI * 1);
+		OI1Mesh.rotateZ(Math.PI * 0.5);
+		OI1Mesh.position.set( -407, 817 , -250);		
+		pspump_rackObject.add(OI1Mesh);		
+
+		//button OFF Details 2
+		const OI2 = new THREE.CylinderGeometry(6, 6, 2, 15);
+		const OI2Mesh = new THREE.Mesh(OI2, materialVeryGreyDark);
+		OI2Mesh.rotateX(Math.PI * 0.5);
+		OI2Mesh.rotateY(Math.PI * 1);
+		OI2Mesh.rotateZ(Math.PI * 0.5);
+		OI2Mesh.position.set( -408, 817 , -250);		
+		pspump_rackObject.add(OI2Mesh);	
+		
+		//border up
+		const borderup = new THREE.BoxGeometry(10, 2, 260);
+		const borderupmesh = new THREE.Mesh(borderup, bluematerial);
+		borderupmesh.position.set( -402, 1000 , -150);
+		pspump_rackObject.add(borderupmesh);	
+		
+		//border mid
+		const bordermid = new THREE.BoxGeometry(10, 2, 260);
+		const bordermidmesh = new THREE.Mesh(bordermid, bluematerial);
+		bordermidmesh.position.set( -402, 900 , -150);
+		pspump_rackObject.add(bordermidmesh);
+		
+		//border left
+		const borderleft = new THREE.BoxGeometry(10, 100, 2);
+		const borderleftmesh = new THREE.Mesh(borderleft, bluematerial);
+		borderleftmesh.position.set( -402, 950 , -280);
+		pspump_rackObject.add(borderleftmesh);	
+		
+		//border right
+		const borderright = new THREE.BoxGeometry(10, 100, 2);
+		const borderrightmesh = new THREE.Mesh(borderright, bluematerial);
+		borderrightmesh.position.set( -402, 950 , -20);
+		pspump_rackObject.add(borderrightmesh);		
+		
+		//button1  PS ionic Pump
+		const button1ionicpump = new THREE.BoxGeometry(10, 30, 30);
+		const button1ionicpumpmesh = new THREE.Mesh(button1ionicpump, materialGreyDark);
+		button1ionicpumpmesh.position.set( -402, 830 , -200);
+		pspump_rackObject.add(button1ionicpumpmesh);			
+		
+		//button2 up  PS ionic Pump
+		const button2ionicpump = new THREE.BoxGeometry(10, 30, 30);
+		const button2ionicpumpmesh = new THREE.Mesh(button2ionicpump, materialGreyDark);
+		button2ionicpumpmesh.position.set( -402, 860 , -160);
+		pspump_rackObject.add(button2ionicpumpmesh);
+		
+		//button3 up  PS ionic Pump
+		const button3ionicpump = new THREE.BoxGeometry(10, 30, 30);
+		const button3ionicpumpmesh = new THREE.Mesh(button3ionicpump, materialGreyDark);
+		button3ionicpumpmesh.position.set( -402, 860 , -120);
+		pspump_rackObject.add(button3ionicpumpmesh);
+		
+		//button4 up  PS ionic Pump
+		const button4ionicpump = new THREE.BoxGeometry(10, 30, 30);
+		const button4ionicpumpmesh = new THREE.Mesh(button4ionicpump, materialGreyDark);
+		button4ionicpumpmesh.position.set( -402, 860 , -80);
+		pspump_rackObject.add(button4ionicpumpmesh);
+		
+		//button5 up  PS ionic Pump
+		const button5ionicpump = new THREE.BoxGeometry(10, 30, 30);
+		const button5ionicpumpmesh = new THREE.Mesh(button5ionicpump, materialGreyDark);
+		button5ionicpumpmesh.position.set( -402, 860 , -40);
+		pspump_rackObject.add(button5ionicpumpmesh);	
+
+		rv_rackObject.add(pspump_rackObject);
+		//CLONE PS PUMP
+
+		const pump2 = pspump_rackObject.clone();
+		pump2.position.set( 0, 0 , 310);
+		rv_rackObject.add(pump2);
+		
+		const pump3 = pspump_rackObject.clone();
+		pump3.position.set( 0, -260 , 0);
+		rv_rackObject.add(pump3);	
+		
+		const pump4 = pspump_rackObject.clone();
+		pump4.position.set( 0, -260 , 310);
+		rv_rackObject.add(pump4);
+		
+		const pump5 = pspump_rackObject.clone();
+		pump5.position.set( 0, -520 , 0);
+		rv_rackObject.add(pump5);
+		
+		const pump6 = pspump_rackObject.clone();
+		pump6.position.set( 0, -520 , 310);
+		rv_rackObject.add(pump6);
+		
+	
+		return rv_rackObject;
+	}
diff --git a/components/src/rvpremium.js b/components/src/rvpremium.js
new file mode 100644
index 0000000000000000000000000000000000000000..88256143e4cd228f4eacb8a86d3879ecf11be9d2
--- /dev/null
+++ b/components/src/rvpremium.js
@@ -0,0 +1,119 @@
+	import * as THREE from 'three';
+
+	// Vacuum rack
+	export function rv(param) {
+		const width=800, height=2500, depth=800;
+		const rv = new THREE.Object3D();
+		const rv_rackObject = new THREE.Object3D();
+
+		const materialBase = new THREE.MeshLambertMaterial({color: 0x0000d0});
+		const text = param.name;
+		let group, textMesh, textGeo, materials;
+		let size = 60;
+		let textheight = 10;
+		let pos = [];
+		let rot = [];
+		const hover = 30;
+		const curveSegments = 8;
+		let font;
+		function insertText(isize, ipos, irot) {
+			group = new THREE.Group();
+			group.position.y = 100;
+			rv.add( group );
+			size = isize;
+			pos = ipos;
+			rot = irot;
+			loadFont();
+		}
+		function loadFont() {
+			const loader = new FontLoader();
+			// https://threejs.org/examples/fonts/droid_sans_bold.typeface.json
+			loader.load( './fonts/droid_sans_bold.typeface.json', function ( response ) {
+				font = response;
+				refreshText();
+			} );
+		}
+		function createText() {
+			textGeo = new TextGeometry(text, {font: font, size: size, height: textheight, curveSegments: curveSegments});
+			textGeo.computeBoundingBox();
+			const centerOffset = -0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x);
+			textMesh = new THREE.Mesh(textGeo, materialBase);
+			textMesh.position.x = pos[0];
+			textMesh.position.y = pos[1];
+			textMesh.position.z = pos[2];
+			textMesh.rotation.x = rot[0];
+			textMesh.rotation.y = rot[1];
+			textMesh.rotation.z = rot[2];
+			group.add( textMesh );
+		}
+		function refreshText() {
+			group.remove( textMesh );
+			if ( ! text ) return;
+			createText();
+		}
+		insertText(50, [850, 2330, 550], [0, Math.PI / 2, 0]);
+	
+		const bluematerial = new THREE.MeshLambertMaterial({color: 0x0053d9});
+		const softbluematerial = new THREE.MeshLambertMaterial({color: 0x2b7cff});
+		const target = new THREE.MeshLambertMaterial({color: 0xfbe928});
+		
+		// rack
+		const rrgeometry = new THREE.BoxGeometry(width, height, depth);
+		const rrmesh = new THREE.Mesh(rrgeometry, softbluematerial);
+		//rrmesh.position.set( 0, 0 , -810);
+		rv_rackObject.add(rrmesh);
+		
+		//front yellow tag
+		const Ftarget = new THREE.BoxGeometry(2, 90, 400);
+		const Ftargetmesh = new THREE.Mesh(Ftarget, target);
+		Ftargetmesh.position.set( -451, 1200 , -5);
+		rv_rackObject.add(Ftargetmesh);		
+		//Rear yellow tag
+		const Rtarget = new THREE.BoxGeometry(2, 90, 400);
+		const Rtargetmesh = new THREE.Mesh(Rtarget, target);
+		Rtargetmesh.position.set( 401, 1200 , -5);
+		rv_rackObject.add(Rtargetmesh);				
+		
+		//edge lle	
+		const llegeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const llemesh = new THREE.Mesh(llegeometry, bluematerial);
+		llemesh.position.set( -425, 0 , -365);
+		rv_rackObject.add(llemesh);
+		
+		//edge lre		
+		const lregeometry = new THREE.BoxGeometry(width-750, height, depth-750);
+		const lremesh = new THREE.Mesh(lregeometry, bluematerial);
+		lremesh.position.set( -425, 0 , 380);
+		rv_rackObject.add(lremesh);		
+
+		//edge lue		
+		const luegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const luemesh = new THREE.Mesh(luegeometry, bluematerial);
+		luemesh.position.set( -425, 1225 , 3);
+		rv_rackObject.add(luemesh);		
+
+		//edge lde		
+		const ldegeometry = new THREE.BoxGeometry(width-750, height-2450, depth-50);
+		const ldemesh = new THREE.Mesh(ldegeometry, bluematerial);
+		ldemesh.position.set( -425, -1230 , 3);
+		rv_rackObject.add(ldemesh);				
+		
+		//base PS ionic Pump
+		const drawer1geometry = new THREE.BoxGeometry(10, 2450, 750);
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/rvscreenfoto.jpg');
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(1, 1);
+		const material = new THREE.MeshBasicMaterial({ map: texture });
+		const gridgeometrymesh = new THREE.Mesh(drawer1geometry, material);
+		gridgeometrymesh.rotateX(Math.PI * 1);
+		gridgeometrymesh.rotateY(Math.PI * 1);
+		gridgeometrymesh.rotateZ(Math.PI * 1);
+		gridgeometrymesh.position.set( -400, 0 , 0);
+		rv_rackObject.add(gridgeometrymesh);		
+
+		rv_rackObject.rotateY(Math.PI);
+		rv_rackObject.position.set(400, 1250, 400);
+		rv.add(rv_rackObject);
+		return rv;
+	}
diff --git a/components/src/scw.js b/components/src/scw.js
new file mode 100644
index 0000000000000000000000000000000000000000..8b774659fb3cc2a5baea7b83eaa18c34dd300779
--- /dev/null
+++ b/components/src/scw.js
@@ -0,0 +1,149 @@
+	import * as THREE from 'three';
+
+	// scw
+	export function scw(length=2200) {
+		const SCWSR = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const dmaterial2 = new THREE.MeshLambertMaterial({color: 0xffffff});
+		const d1geometry = new THREE.CylinderGeometry(700, 700, length, 35);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		SCWSR.add(d1mesh);				
+		SCWSR.rotateX(Math.PI * 0.5);
+		SCWSR.rotatedX = true;	
+
+		// left
+		const lrgeometry = new THREE.CylinderGeometry(750, 750, 100, 65);
+		const d2mesh = new THREE.Mesh(lrgeometry, dmaterial);
+		d2mesh.position.set(0, -length/2-50, 0);
+		SCWSR.add(d2mesh);
+		
+		// left center
+		const lrgeometry2 = new THREE.CylinderGeometry(750, 750, 70, 65);
+		const d2meshc = new THREE.Mesh(lrgeometry2, dmaterial);
+		d2meshc.position.set(0, -length/2+800, 0);
+		SCWSR.add(d2meshc);		
+
+		// right
+		const d3mesh = new THREE.Mesh(lrgeometry, dmaterial);
+		d3mesh.position.set(0, length/2+50, 0);
+		SCWSR.add(d3mesh);
+		
+		// right center
+		const lrgeometry3 = new THREE.CylinderGeometry(750, 750, 70, 65);
+		const d3meshc = new THREE.Mesh(lrgeometry3, dmaterial);
+		d3meshc.position.set(0, -length/2+1400, 0);
+		SCWSR.add(d3meshc);				
+
+		// up1
+		const udgeometry = new THREE.CylinderGeometry(200, 200, 300, 25);
+		const d4mesh = new THREE.Mesh(udgeometry, dmaterial);
+		d4mesh.rotateX(Math.PI * 0.5);
+		d4mesh.rotateY(Math.PI * 1);
+		d4mesh.rotateZ(Math.PI * 1);
+		d4mesh.position.set(0, -600 , -770);		
+		SCWSR.add(d4mesh);
+
+		// up2
+		const udgeometry2 = new THREE.CylinderGeometry(200, 200, 300, 25);
+		const d5mesh = new THREE.Mesh(udgeometry2, dmaterial);
+		d5mesh.rotateX(Math.PI * 0.5);
+		d5mesh.rotateY(Math.PI * 1);
+		d5mesh.rotateZ(Math.PI * 1);
+		d5mesh.position.set(0, 0 , -730);		
+		SCWSR.add(d5mesh);
+
+
+
+		//up3
+		const udgeometry2g = new THREE.CylinderGeometry(200, 200, 300, 25);
+		const d6mesh = new THREE.Mesh(udgeometry2g, dmaterial);
+		d6mesh.rotateX(Math.PI * 0.5);
+		d6mesh.rotateY(Math.PI * 1);
+		d6mesh.rotateZ(Math.PI * 1);
+		d6mesh.position.set(0, 600 , -730);		
+		SCWSR.add(d6mesh);	
+		
+		//cubo1
+		const cube1 = new THREE.BoxGeometry(150, 150, 150);
+		const d7mesh = new THREE.Mesh(cube1, dmaterial2);
+		d7mesh.position.set(-610, 0 , -200);
+		SCWSR.add(d7mesh);	
+		
+			
+		// up1b
+		const udgeometryb = new THREE.CylinderGeometry(250, 250, 100, 25);
+		const d9mesh = new THREE.Mesh(udgeometryb, dmaterial);
+		d9mesh.rotateX(Math.PI * 0.5);
+		d9mesh.rotateY(Math.PI * 1);
+		d9mesh.rotateZ(Math.PI * 1);
+		d9mesh.position.set(0, -600 , -900);		
+		SCWSR.add(d9mesh);	
+		
+		// up1c
+		const udgeometryc = new THREE.CylinderGeometry(200, 200, 300, 25);
+		const d10mesh = new THREE.Mesh(udgeometryc, dmaterial);
+		d10mesh.rotateX(Math.PI * 0.5);
+		d10mesh.rotateY(Math.PI * 1);
+		d10mesh.rotateZ(Math.PI * 1);
+		d10mesh.position.set(0, -600 , -1100);		
+		SCWSR.add(d10mesh);	
+		
+		// up1d
+		const udgeometrye = new THREE.CylinderGeometry(250, 250, 100, 25);
+		const d11mesh = new THREE.Mesh(udgeometryb, dmaterial);
+		d11mesh.rotateX(Math.PI * 0.5);
+		d11mesh.rotateY(Math.PI * 1);
+		d11mesh.rotateZ(Math.PI * 1);
+		d11mesh.position.set(0, -600 , -1300);		
+		SCWSR.add(d11mesh);	
+		
+		// up2b
+		const d12mesh = new THREE.Mesh(udgeometryb, dmaterial);
+		d12mesh.rotateX(Math.PI * 0.5);
+		d12mesh.rotateY(Math.PI * 1);
+		d12mesh.rotateZ(Math.PI * 1);
+		d12mesh.position.set(0, 0 , -900);		
+		SCWSR.add(d12mesh);			
+		
+		// up2c
+		const d13mesh = new THREE.Mesh(udgeometryc, dmaterial);
+		d13mesh.rotateX(Math.PI * 0.5);
+		d13mesh.rotateY(Math.PI * 1);
+		d13mesh.rotateZ(Math.PI * 1);
+		d13mesh.position.set(0, 0 , -900);		
+		SCWSR.add(d13mesh);			
+
+		// up2d
+		const d14mesh = new THREE.Mesh(udgeometryb, dmaterial);
+		d14mesh.rotateX(Math.PI * 0.5);
+		d14mesh.rotateY(Math.PI * 1);
+		d14mesh.rotateZ(Math.PI * 1);
+		d14mesh.position.set(0, 0 , -1090);		
+		SCWSR.add(d14mesh);	
+		
+		// up3b
+		const d15mesh = new THREE.Mesh(udgeometryb, dmaterial);
+		d15mesh.rotateX(Math.PI * 0.5);
+		d15mesh.rotateY(Math.PI * 1);
+		d15mesh.rotateZ(Math.PI * 1);
+		d15mesh.position.set(0, 600 , -900);		
+		SCWSR.add(d15mesh);	
+		
+		// up3c
+		const d16mesh = new THREE.Mesh(udgeometryc, dmaterial);
+		d16mesh.rotateX(Math.PI * 0.5);
+		d16mesh.rotateY(Math.PI * 1);
+		d16mesh.rotateZ(Math.PI * 1);
+		d16mesh.position.set(0, 600 , -1100);		
+		SCWSR.add(d16mesh);		
+		
+		// up3d
+		const d17mesh = new THREE.Mesh(udgeometryb, dmaterial);
+		d17mesh.rotateX(Math.PI * 0.5);
+		d17mesh.rotateY(Math.PI * 1);
+		d17mesh.rotateZ(Math.PI * 1);
+		d17mesh.position.set(0, 600 , -1300);		
+		SCWSR.add(d17mesh);			
+		
+		return SCWSR;
+	}
diff --git a/components/src/scw.svg b/components/src/scw.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3d5dc434358ed9908a4bccf35878d42be023a1c8
--- /dev/null
+++ b/components/src/scw.svg
@@ -0,0 +1,16 @@
+<svg viewBox="0 0 700px 350px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2)">
+		<rect x="40" y="70" width="500" height="200" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<rect x="20" y="40" width="40" height="260" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<rect x="500" y="40" width="40" height="260" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<circle r="40" cx="140" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="10px" />
+		<circle r="30" cx="140" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="40" cx="280" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="10px" />
+		<circle r="30" cx="280" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="40" cx="420" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="10px" />
+		<circle r="30" cx="420" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<rect x="260" y="230" width="40" height="20" stroke="#2f2f2f" stroke-width="6" fill="#c7c7c7" />
+		<line x1="210" y1="55" x2="210" y2="285" stroke="#a2a2a2" stroke-width="13px" />
+		<line x1="350" y1="55" x2="350" y2="285" stroke="#a2a2a2" stroke-width="13px" />
+	</g>
+</svg>
diff --git a/components/src/scwfast.js b/components/src/scwfast.js
new file mode 100644
index 0000000000000000000000000000000000000000..e7166d84642407398cb1e3e82072e3978f5f8e83
--- /dev/null
+++ b/components/src/scwfast.js
@@ -0,0 +1,60 @@
+	import * as THREE from 'three';
+
+	// scw
+	export function scwfast(length=2200) {
+		const SCWSR = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const dmaterial2 = new THREE.MeshLambertMaterial({color: 0xffffff});
+		const d1geometry = new THREE.CylinderGeometry(700, 700, length, 35);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		SCWSR.add(d1mesh);				
+		SCWSR.rotateX(Math.PI * 0.5);
+		SCWSR.rotatedX = true;	
+
+		// left
+		const lrgeometry = new THREE.CylinderGeometry(750, 750, 100, 65);
+		const d2mesh = new THREE.Mesh(lrgeometry, dmaterial);
+		d2mesh.position.set(0, -length/2-50, 0);
+		SCWSR.add(d2mesh);
+	
+
+		// right
+		const d3mesh = new THREE.Mesh(lrgeometry, dmaterial);
+		d3mesh.position.set(0, length/2+50, 0);
+		SCWSR.add(d3mesh);
+		
+		// up1
+		const udgeometry = new THREE.CylinderGeometry(200, 200, 700, 25);
+		const d4mesh = new THREE.Mesh(udgeometry, dmaterial);
+		d4mesh.rotateX(Math.PI * 0.5);
+		d4mesh.rotateY(Math.PI * 1);
+		d4mesh.rotateZ(Math.PI * 1);
+		d4mesh.position.set(0, -600 , -770);		
+		SCWSR.add(d4mesh);
+
+		// up2
+		const udgeometry2 = new THREE.CylinderGeometry(200, 200, 400, 25);
+		const d5mesh = new THREE.Mesh(udgeometry2, dmaterial);
+		d5mesh.rotateX(Math.PI * 0.5);
+		d5mesh.rotateY(Math.PI * 1);
+		d5mesh.rotateZ(Math.PI * 1);
+		d5mesh.position.set(0, 0 , -730);		
+		SCWSR.add(d5mesh);
+
+		//up3
+		const udgeometry2g = new THREE.CylinderGeometry(200, 200, 700, 25);
+		const d6mesh = new THREE.Mesh(udgeometry2g, dmaterial);
+		d6mesh.rotateX(Math.PI * 0.5);
+		d6mesh.rotateY(Math.PI * 1);
+		d6mesh.rotateZ(Math.PI * 1);
+		d6mesh.position.set(0, 600 , -730);		
+		SCWSR.add(d6mesh);	
+		
+		//cubo1
+		const cube1 = new THREE.BoxGeometry(150, 150, 150);
+		const d7mesh = new THREE.Mesh(cube1, dmaterial2);
+		d7mesh.position.set(-610, 0 , -200);
+		SCWSR.add(d7mesh);	
+
+		return SCWSR;
+	}
diff --git a/components/src/septum.js b/components/src/septum.js
new file mode 100644
index 0000000000000000000000000000000000000000..a56383a8c441adb1f71ba5bbc2df492c7c0805b8
--- /dev/null
+++ b/components/src/septum.js
@@ -0,0 +1,48 @@
+	import * as THREE from 'three';
+
+	// septum
+		export function septum(length=1000) {
+			const septumSR = new THREE.Object3D();
+			const dmaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+			const d1geometry = new THREE.CylinderGeometry(200, 200, length, 25);
+			const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+			septumSR.add(d1mesh);				
+			septumSR.rotateX(Math.PI * 0.5);
+			septumSR.rotatedX = true;	
+
+			// left
+			const dmateria2 = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+			const d2geometry = new THREE.CylinderGeometry(250, 250, 100, 25);
+			const d2mesh = new THREE.Mesh(d2geometry, dmateria2);
+			d2mesh.position.set(0, -length/2-50, 0);
+			septumSR.add(d2mesh);
+
+			// right
+			const dmateria3 = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+			const d3geometry = new THREE.CylinderGeometry(250, 250, 100, 25);
+			const d3mesh = new THREE.Mesh(d3geometry, dmateria3);
+			d3mesh.position.set(0, length/2+50, 0);
+			septumSR.add(d3mesh);
+
+			// up1
+			const dmateria4 = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+			const d4geometry = new THREE.CylinderGeometry(100, 100, 100, 25);
+			const d4mesh = new THREE.Mesh(d4geometry, dmateria4);
+			d4mesh.rotateX(Math.PI * 0.5);
+			d4mesh.rotateY(Math.PI * 1);
+			d4mesh.rotateZ(Math.PI * 1);
+			d4mesh.position.set(0, -300 , -200);		
+			septumSR.add(d4mesh);
+
+			// up2
+			const dmateria5 = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+			const d5geometry = new THREE.CylinderGeometry(100, 100, 100, 25);
+			const d5mesh = new THREE.Mesh(d5geometry, dmateria5);
+			d5mesh.rotateX(Math.PI * 0.5);
+			d5mesh.rotateY(Math.PI * 1);
+			d5mesh.rotateZ(Math.PI * 1);
+			d5mesh.position.set(0, 300 , -200);		
+			septumSR.add(d5mesh);
+
+			return septumSR;
+		}
diff --git a/components/src/sextupole.js b/components/src/sextupole.js
new file mode 100644
index 0000000000000000000000000000000000000000..f7a04c264dc8e052b7b6dc7454eeddc5ca8f33ee
--- /dev/null
+++ b/components/src/sextupole.js
@@ -0,0 +1,24 @@
+	import * as THREE from 'three';
+
+	// Sextupole
+	export const sextupoleMaster = sextupole();
+	export function sextupole(length=230) {
+		const sextupoleMaster = new THREE.Object3D();
+		const chamberMaterial = new THREE.MeshLambertMaterial({color: 0xc0c0c0});
+		const sextupolematerial = new THREE.MeshLambertMaterial({color: 0xffff00});
+		const sextupolegeometry = new THREE.CylinderGeometry(250, 250, length, 6);
+		const sextupolemesh = new THREE.Mesh(sextupolegeometry, sextupolematerial);
+		sextupoleMaster.add(sextupolemesh);
+		const sextupole2geometry = new THREE.CylinderGeometry(290, 290, 30, 50);
+		const sextupole2mesh = new THREE.Mesh(sextupole2geometry, chamberMaterial);
+		sextupole2mesh.position.set(0, -length/2-15, 0);
+		sextupoleMaster.add(sextupole2mesh);
+		const sextupole3mesh = new THREE.Mesh(sextupole2geometry, chamberMaterial);
+		sextupole3mesh.position.set(0, length/2+15, 0);
+		sextupoleMaster.add(sextupole3mesh);
+		sextupoleMaster.rotateX(Math.PI * 0.5);
+		const sedges = new THREE.EdgesGeometry(sextupolegeometry);
+		const sline = new THREE.LineSegments(sedges, new THREE.LineBasicMaterial({color: 0x808000}));
+		sextupoleMaster.add(sline);
+		return sextupoleMaster;
+	}
diff --git a/components/src/sextupole.svg b/components/src/sextupole.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8ea9b50daf00b075a39a745b66411d1c0cc6d645
--- /dev/null
+++ b/components/src/sextupole.svg
@@ -0,0 +1,9 @@
+<svg viewBox="0 0 400px 210px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2)">
+		<rect x="50" y="50" width="110" height="110" rx="10" ry="10" fill="#ffe000" stroke="darkslategrey" stroke-width="5"/>
+		<text x="105" y="135" text-anchor="middle" font-family="Arial" font-size="90" fill="black" stroke-width="2">S</text>
+		<path d="M 48 60 a 90 55 0 0 0 0 45 M 162 60 a 90 55 0 0 1 0 45 " stroke="#ffe600" stroke-width="2" fill="#ff7501" />
+		<path d="M 48 105 a 90 55 0 0 0 0 45 M 162 105 a 90 55 0 0 1 0 45" stroke="#ffe600" stroke-width="2" fill="#ff7501" />
+		<path d="M 80 48 Q105 30 130 48 M 80 162 Q105 180 135 162" stroke="#ffe600" stroke-width="2" fill="#ff7501" />
+	</g>
+</svg>
diff --git a/components/src/sextupolebooster.js b/components/src/sextupolebooster.js
new file mode 100644
index 0000000000000000000000000000000000000000..0498d0a02b01f95b7432eadf0c99551208136333
--- /dev/null
+++ b/components/src/sextupolebooster.js
@@ -0,0 +1,54 @@
+// jshint esversion: 6	
+	import * as THREE from 'three';
+
+	// sextupole booster
+	export function sextupolebooster(length=110) {
+		const SextupoleContiner = new THREE.Object3D();
+		const SextupoleEnvelope = new THREE.Object3D();
+		const SextupoleMaster = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xFFE000});
+
+		// support high
+		const geometry_1 = new THREE.BoxGeometry(length, 100, 200);
+		const dmesh_1 = new THREE.Mesh(geometry_1, dmaterial);
+		dmesh_1.position.set(0, 324, 0);
+		SextupoleMaster.add(dmesh_1);
+		
+		// support side
+		const dmesh_2 = new THREE.Mesh(geometry_1, dmaterial);
+		dmesh_2.position.set(0, 280, -162);
+		dmesh_2.rotateX(-Math.PI / 6);
+		SextupoleMaster.add(dmesh_2);
+
+		const geometry3 = new THREE.BoxGeometry(length-30, 120, 50);
+		const dmesh3 = new THREE.Mesh(geometry3, dmaterial);
+		dmesh3.position.set(0, 140, 0);
+		SextupoleMaster.add(dmesh3);		
+
+		// coil
+		const coilmaterial = new THREE.MeshLambertMaterial({color: 0xc08000});
+		const textureLoader = new THREE.TextureLoader();
+		const texture = textureLoader.load('./components/coil_texture.png');
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+		texture.repeat.set(5, 5);
+		const d6geometry = new THREE.CylinderGeometry(80 /*radiusTop*/, 80 /*radiusBottom*/, 80 /*height*/, 25 /*radialSegments*/, 4 /*heightSegments*/, false /*openEnded*/,Math.PI * 1.5 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const material6 = new THREE.MeshBasicMaterial({ map: texture });
+		const materialside6 = new THREE.MeshBasicMaterial({color: 0xcd7f32});
+		const materials6 = [material6, materialside6, materialside6];		
+		const d6mesh = new THREE.Mesh(d6geometry, materials6);
+		d6mesh.position.set(0, 230, 0);
+		d6mesh.rotateX(Math.PI * 1.50);
+		d6mesh.rotateY(Math.PI * 1.50);
+		d6mesh.rotateZ(Math.PI * 1.50);
+		SextupoleMaster.add(d6mesh);
+
+		for (let i=1; i<6; i++) {
+			const Sextupole2 = SextupoleMaster.clone();
+			Sextupole2.rotateX(-Math.PI / 3*i);
+			SextupoleContiner.add(Sextupole2);
+		}
+		SextupoleContiner.add(SextupoleMaster);
+		SextupoleContiner.rotateY(Math.PI * -0.5);
+		SextupoleEnvelope.add(SextupoleContiner);
+		return SextupoleEnvelope;
+	}
diff --git a/components/src/sextupoleboosterfast.js b/components/src/sextupoleboosterfast.js
new file mode 100644
index 0000000000000000000000000000000000000000..b4c76aa2b08796096c24fe657e41ddc121c4f47f
--- /dev/null
+++ b/components/src/sextupoleboosterfast.js
@@ -0,0 +1,13 @@
+	import * as THREE from 'three';
+
+	// Sextupole
+	export function sextupoleboosterfast(length=200) {
+		const sextupoleMaster = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xffff00});
+		const d1geometry = new THREE.CylinderGeometry(300, 300, length, 6);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		d1mesh.rotateX(Math.PI * 0.5);
+		d1mesh.rotateY(Math.PI * 0.5);
+		sextupoleMaster.add(d1mesh);				
+		return sextupoleMaster;
+	}
diff --git a/components/src/sextupoleesrf.js b/components/src/sextupoleesrf.js
new file mode 100644
index 0000000000000000000000000000000000000000..2ae83ce62636b6039a8554305b66926cbc49f7d5
--- /dev/null
+++ b/components/src/sextupoleesrf.js
@@ -0,0 +1,17 @@
+	import * as THREE from 'three';
+
+	// Sextupole
+	export function sextupoleesrf(length=230) {
+		const sextupoleMaster = new THREE.Object3D();
+		const chamberMaterial = new THREE.MeshLambertMaterial({color: 0xc0c0c0});
+		const sextupolematerial = new THREE.MeshLambertMaterial({color: 0x00d000});
+		const sextupolegeometry = new THREE.CylinderGeometry(250, 250, length, 6);
+		const sextupolemesh = new THREE.Mesh(sextupolegeometry, sextupolematerial);
+		sextupoleMaster.add(sextupolemesh);
+		sextupoleMaster.rotateX(Math.PI * 0.5);
+		sextupoleMaster.rotatedX = true;
+		const sedges = new THREE.EdgesGeometry(sextupolegeometry);
+		const sline = new THREE.LineSegments(sedges, new THREE.LineBasicMaterial({color: 0x808000}));
+		sextupoleMaster.add(sline);
+		return sextupoleMaster;
+	}
diff --git a/components/src/spte.js b/components/src/spte.js
new file mode 100644
index 0000000000000000000000000000000000000000..5b888e85e199b16af47aa288268e89f84078723e
--- /dev/null
+++ b/components/src/spte.js
@@ -0,0 +1,42 @@
+	import * as THREE from 'three';
+
+	// septum
+	export function spte(length=2000) {
+		const septumSR = new THREE.Object3D();
+		const dmaterial = new THREE.MeshLambertMaterial({color: 0xf0f0f0});
+		const d1geometry = new THREE.CylinderGeometry(400, 400, length, 25);
+		const d1mesh = new THREE.Mesh(d1geometry, dmaterial);
+		septumSR.add(d1mesh);				
+		septumSR.rotateX(Math.PI * 0.5);
+		septumSR.rotatedX = true;	
+
+		// left
+		const lrgeometry = new THREE.CylinderGeometry(550, 550, 100, 25);
+		const d2mesh = new THREE.Mesh(lrgeometry, dmaterial);
+		d2mesh.position.set(0, -length/2-50, 0);
+		septumSR.add(d2mesh);
+
+		// right
+		const d3mesh = new THREE.Mesh(lrgeometry, dmaterial);
+		d3mesh.position.set(0, length/2+50, 0);
+		septumSR.add(d3mesh);
+
+		// up1
+		const udgeometry = new THREE.CylinderGeometry(200, 200, 100, 25);
+		const d4mesh = new THREE.Mesh(udgeometry, dmaterial);
+		d4mesh.rotateX(Math.PI * 0.5);
+		d4mesh.rotateY(Math.PI * 1);
+		d4mesh.rotateZ(Math.PI * 1);
+		d4mesh.position.set(0, -length/4 , -430);		
+		septumSR.add(d4mesh);
+
+		// up2
+		const d5mesh = new THREE.Mesh(udgeometry, dmaterial);
+		d5mesh.rotateX(Math.PI * 0.5);
+		d5mesh.rotateY(Math.PI * 1);
+		d5mesh.rotateZ(Math.PI * 1);
+		d5mesh.position.set(0, length/4 , -430);		
+		septumSR.add(d5mesh);
+
+		return septumSR;
+	}
diff --git a/components/src/spte.svg b/components/src/spte.svg
new file mode 100644
index 0000000000000000000000000000000000000000..64c00d8fd28c1662e64f4c0a0647d44afe0683f5
--- /dev/null
+++ b/components/src/spte.svg
@@ -0,0 +1,11 @@
+<svg viewBox="0 0 700px 350px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2)">
+		<rect x="40" y="70" width="500" height="200" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<rect x="20" y="40" width="40" height="260" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<rect x="500" y="40" width="40" height="260" stroke="#2f2f2f" stroke-width="13" fill="#c7c7c7" />
+		<circle r="60" cx="170" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="10px" />
+		<circle r="50" cx="170" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+		<circle r="60" cx="385" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="10px" />
+		<circle r="50" cx="385" cy="165" fill="#edebeb" stroke="#2f2f2f" stroke-width="5px" />
+	</g>
+</svg>
diff --git a/components/src/undulator.js b/components/src/undulator.js
new file mode 100644
index 0000000000000000000000000000000000000000..d8e0f38e1004e81e0a58e1fe1ebcfeadcd5d92bc
--- /dev/null
+++ b/components/src/undulator.js
@@ -0,0 +1,27 @@
+	import * as THREE from 'three';
+
+	// undulator
+	export function undulator(length=1300){
+		const undulatorMaster = new THREE.Object3D();
+		const chamberMaterial = new THREE.MeshLambertMaterial({color: 0xc0c0c0});
+		const loader = new THREE.TextureLoader();
+		const texture = loader.load('./components/undulator.png');
+		const textureTop = texture.clone();
+		const textureSide = texture.clone();
+		textureTop.wrapS = textureTop.wrapT = THREE.RepeatWrapping;
+		textureTop.repeat.set(30, 1);
+		textureSide.offset.set(0.95, 0.95);
+		const face = new THREE.MeshBasicMaterial({map: texture});
+		const faceTop = new THREE.MeshBasicMaterial({map: textureTop});
+		const faceSide = new THREE.MeshBasicMaterial({map: textureSide});
+		const materials = [faceTop,faceTop,chamberMaterial,chamberMaterial,chamberMaterial,chamberMaterial];
+		const ugeometry = new THREE.BoxGeometry(400, 400, length);
+		const umesh = new THREE.Mesh(ugeometry, materials);
+		undulatorMaster.add(umesh);				
+		const qedges = new THREE.EdgesGeometry(ugeometry);
+		const lineMaterial = new THREE.LineBasicMaterial({color: 0x000000});
+		lineMaterial.linewidth = 4;
+		const qline = new THREE.LineSegments(qedges, lineMaterial);
+		undulatorMaster.add(qline);
+		return undulatorMaster;
+	}
diff --git a/components/src/undulator.svg b/components/src/undulator.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7499a95be3fd21a2cfff1e06e2bd9b2b0fafbe08
--- /dev/null
+++ b/components/src/undulator.svg
@@ -0,0 +1,13 @@
+<svg viewBox="0 0 800px 200px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(1.7)">
+		<defs>
+			<pattern id="Pattern" x="0" y="0" width=".05" height="1">
+				<rect x="0" y="0" width="40" height="200" fill="#a6a4c9"/>
+				<rect x="0" y="0" width="20" height="100" fill="#8a89a7" stroke="black" stroke-width="1" />
+				<rect x="20" y="100" width="20" height="100" fill="#8a89a7" stroke="black" stroke-width="1" />
+			</pattern>
+		</defs>
+		<rect fill="url(#Pattern)" width="800" height="200" stroke="black" stroke-width="10" />
+	</g>
+</svg>
+
diff --git a/components/src/vlv.js b/components/src/vlv.js
new file mode 100644
index 0000000000000000000000000000000000000000..da29502c93a815c39cbd40755127e9f95978cebd
--- /dev/null
+++ b/components/src/vlv.js
@@ -0,0 +1,73 @@
+	import * as THREE from 'three';
+
+	// valve
+	export function vlv(param) {
+		const vlvContiner = new THREE.Object3D();
+		const vlvObject = new THREE.Object3D();
+		
+		//cylinder
+		const cylgeometry = new THREE.CylinderGeometry(25, 25, 100, 15);
+		const cylmaterial = new THREE.MeshLambertMaterial({color: 0xc7c7c7});
+		const cylmesh = new THREE.Mesh(cylgeometry, cylmaterial);
+		cylmesh.rotateX(Math.PI * 1);
+		cylmesh.rotateY(Math.PI * 1.0);
+		cylmesh.rotateZ(Math.PI * 1.5);
+		cylmesh.position.set(0, 0 , 0);			
+		vlvObject.add(cylmesh);			
+		
+		// base1
+		const vlvgeometry = new THREE.BoxGeometry(30, 160, 60 );
+		const vlvmaterial = new THREE.MeshLambertMaterial({color: 0xc7c7c7});		
+		const vlv1mesh = new THREE.Mesh(vlvgeometry, vlvmaterial);
+		vlv1mesh.position.set(0, 50, 0);
+		vlvObject.add(vlv1mesh);		
+		
+		// hat1
+		const hatmaterial = new THREE.MeshLambertMaterial({color: 0xc7c7c7});
+		const hatgeometry = new THREE.BoxGeometry(50, 20, 100 );
+		const hatmesh = new THREE.Mesh(hatgeometry, hatmaterial);
+		hatmesh.position.set(0, 120, 0);
+		vlvObject.add(hatmesh);	
+		
+		// blackbox
+		const blackboxmaterial = new THREE.MeshLambertMaterial({color: 0x636363});
+		const blackboxgeometry = new THREE.BoxGeometry(40, 70, 70 );
+		const blackboxmesh = new THREE.Mesh(blackboxgeometry, blackboxmaterial);
+		blackboxmesh.position.set(0, 165, 15);
+		vlvObject.add(blackboxmesh);
+		
+		// blackbox2
+		const blackbox2material = new THREE.MeshLambertMaterial({color: 0x000000});
+		const blackbox2geometry = new THREE.BoxGeometry(40, 40, 20 );
+		const blackbo2xmesh = new THREE.Mesh(blackbox2geometry, blackbox2material);
+		blackbo2xmesh.position.set(0, 165, -30);
+		vlvObject.add(blackbo2xmesh);		
+		
+		//TRIANGLE1
+		const trianglegeometry = new THREE.CylinderGeometry(18, 18, 32, 3);
+		const trianglegeometrymesh = new THREE.Mesh(trianglegeometry, blackbox2material);
+		trianglegeometrymesh.rotateX(Math.PI * 0);
+		trianglegeometrymesh.rotateY(Math.PI * 0);
+		trianglegeometrymesh.rotateZ(Math.PI * 0.5);		
+		trianglegeometrymesh.position.set(0, 60 , -17);		
+		vlvObject.add(trianglegeometrymesh);	
+		
+		//TRIANGLE2
+		const trianglegeometry2 = new THREE.CylinderGeometry(18, 18, 32, 3);
+		const triangle2geometrymesh = new THREE.Mesh(trianglegeometry2, blackbox2material);
+		triangle2geometrymesh.rotateX(Math.PI * 0);
+		triangle2geometrymesh.rotateY(Math.PI * 1);
+		triangle2geometrymesh.rotateZ(Math.PI * 0.5);		
+		triangle2geometrymesh.position.set(0, 60 ,17);		
+		vlvObject.add(triangle2geometrymesh);		
+			
+		vlvObject.scale.setX(13);
+		vlvObject.scale.setY(13);
+		vlvObject.scale.setZ(13);
+		vlvObject.position.set(0, 0, 0);
+		vlvContiner.add(vlvObject);
+		vlvContiner.rotateY(Math.PI * -1);		
+		
+		
+		return vlvContiner;
+	}
diff --git a/components/src/vlv.svg b/components/src/vlv.svg
new file mode 100644
index 0000000000000000000000000000000000000000..78738349232a9e0f09453d5c26aeb3b7360a901f
--- /dev/null
+++ b/components/src/vlv.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 900px 900px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2) translate(0 45)">
+		<polygon points="10,10 70,10 40,55" fill="white" stroke="#2f2f2f" stroke-width="3" />
+		<polygon points="40,55 10,100 70,100" fill="white" stroke="#2f2f2f" stroke-width="3" />
+		<circle r="15" cx="40" cy="55" fill="white" stroke="#2f2f2f" stroke-width="3px" />
+	</g>
+</svg>
diff --git a/components/src/wall.js b/components/src/wall.js
new file mode 100644
index 0000000000000000000000000000000000000000..9bcb32e4e3ff407aaac700b16d3736e01d2116a6
--- /dev/null
+++ b/components/src/wall.js
@@ -0,0 +1,15 @@
+	import * as THREE from 'three';
+
+	// transparent wall
+	export function wall(length=3000) {
+		const wall = new THREE.Object3D();
+		const material = new THREE.MeshBasicMaterial({color: 0xff8080, transparent: true, opacity: 0.2, side: THREE.DoubleSide,});
+		const geometry = new THREE.CylinderGeometry(10 /*radiusTop*/, 10 /*radiusBottom*/, length /*height*/, 4 /*radialSegments*/, 2 /*heightSegments*/, false /*openEnded*/,0 /*thetaStart*/, Math.PI * 2 /*thetaLength*/);
+		const chamberMesh = new THREE.Mesh(geometry, material);
+		chamberMesh.rotateX(Math.PI * 0.5);
+		chamberMesh.scale.setZ(100);
+		chamberMesh.position.setY(500);
+		chamberMesh.rotatedX = true;
+		wall.add(chamberMesh);
+		return wall;
+	}
diff --git a/components/src/wiggler.js b/components/src/wiggler.js
new file mode 100644
index 0000000000000000000000000000000000000000..9a5c9b0e35e5fe961ef0de3cd4fabef835e90c5c
--- /dev/null
+++ b/components/src/wiggler.js
@@ -0,0 +1,27 @@
+	import * as THREE from 'three';
+
+	// wiggler
+	export function wiggler(length=1300){
+		const wigglerMaster = new THREE.Object3D();
+		const chamberMaterial = new THREE.MeshLambertMaterial({color: 0xf3a1eb});
+		const loader = new THREE.TextureLoader();
+		const texture = loader.load('./components/wiggler.png');
+		const textureTop = texture.clone();
+		const textureSide = texture.clone();
+		textureTop.wrapS = textureTop.wrapT = THREE.RepeatWrapping;
+		textureTop.repeat.set(30, 1);
+		textureSide.offset.set(0.95, 0.95);
+		const face = new THREE.MeshBasicMaterial({map: texture});
+		const faceTop = new THREE.MeshBasicMaterial({map: textureTop});
+		const faceSide = new THREE.MeshBasicMaterial({map: textureSide});
+		const materials = [faceTop,faceTop,chamberMaterial,chamberMaterial,chamberMaterial,chamberMaterial];
+		const ugeometry = new THREE.BoxGeometry(400, 400, length);
+		const umesh = new THREE.Mesh(ugeometry, materials);
+		wigglerMaster.add(umesh);				
+		const qedges = new THREE.EdgesGeometry(ugeometry);
+		const lineMaterial = new THREE.LineBasicMaterial({color: 0x000000});
+		lineMaterial.linewidth = 4;
+		const qline = new THREE.LineSegments(qedges, lineMaterial);
+		wigglerMaster.add(qline);
+		return wigglerMaster;
+	}
diff --git a/components/src/wiggler.svg b/components/src/wiggler.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b35d51061b2491c4918e4acda2ec5aa960b82e2a
--- /dev/null
+++ b/components/src/wiggler.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 600px 300px" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+	<g transform="scale(2)">
+		<rect x="40" y="10" width="400" height="90" stroke="black" stroke-width="10" fill="plum" />
+		<rect x="40" y="100" width="400" height="90" stroke="black" stroke-width="10" fill="plum" />
+		<rect x="40" y="190" width="40" height="40" stroke="black" stroke-width="10" fill="none" />
+		<rect x="400" y="190" width="40" height="40" stroke="black" stroke-width="10" fill="none" />
+	</g>
+</svg>