Index: js/human_3d_alignment/src/visualization/camera.js
===================================================================
--- js/human_3d_alignment/src/visualization/camera.js	(revision 881)
+++ js/human_3d_alignment/src/visualization/camera.js	(revision 911)
@@ -87,4 +87,7 @@
         let modelSphere = modelBox.getBoundingSphere();
 
+        this.targetPosition = modelSphere.center.clone();
+        this.cameraPosition = modelSphere.center.clone().addScalar(modelSphere.radius);
+
         return {
             target: {
Index: js/human_3d_alignment/src/visualization/framstick.js
===================================================================
--- js/human_3d_alignment/src/visualization/framstick.js	(revision 911)
+++ js/human_3d_alignment/src/visualization/framstick.js	(revision 911)
@@ -0,0 +1,226 @@
+/*global Module*/
+"use strict";
+
+import * as THREE from 'three';
+import PartMeshFactory from './partmeshfactory';
+import JointMeshFactory from './jointmeshfactory';
+import GenotypeParser from '../utils/genotypeparser';
+import { geometry } from './transformations';
+
+
+/**
+ * @file Framstick Object
+ * @author Patryk Gliszczynski
+ * @version 1.2
+ */
+class Framstick {
+
+  /**
+   * 
+   * @param {Genotype} genotype genotype of creating framstick
+   */
+  constructor(genotype, viewer) {
+    this.viewer = viewer;
+    this.genotype = genotype;
+    this.parts = [];
+    this.joints = [];
+    this.meshes = [];
+    
+    this.positions = [];
+    this.color = 'white';
+    this.avgPosition = new THREE.Vector3(0, 0, 0);
+
+    this.partfactory = new PartMeshFactory(geometry.part);
+    this.jointfactory = new JointMeshFactory(geometry.joint);
+
+    this.mesh = new THREE.Group();
+    this.loadFromGenotype();
+
+    for (let i = 0; i < this.mesh.children.length; i++) {
+      this.avgPosition.add(this.mesh.children[i].position.clone());
+    }
+
+    this.avgPosition.divideScalar(this.mesh.children.length);
+
+    for (let i = 0; i < this.mesh.children.length; i++) {
+      this.mesh.children[i].position.sub(this.avgPosition);
+    }
+
+    this.viewer.scene.add(this.mesh);
+
+  }
+
+  /**
+   * Change Framstick's color on click
+   */
+  setColor(color) { 
+    if (this.color != color) {
+      let colorTemp = this.color;
+      this.color = color;
+
+      let position = this.mesh.position.clone();
+      let rotation = this.mesh.rotation.clone();
+      this.viewer.scene.remove(this.mesh);
+
+      this.loadFromGenotype();
+
+      this.mesh.position.set( position.x, position.y, position.z );
+      this.mesh.rotation.set(rotation.x, rotation.y, rotation.z, rotation.order );
+
+
+      if (this.color == 'red' || colorTemp == 'red') {
+        for (let i = 0; i < this.meshes.length; i++) {
+          this.viewer.meshes.shift();
+        }
+        for (let i = 0; i < this.parts.length; i++) {
+          this.viewer.parts.shift();
+        }
+        for (let i = this.meshes.length - 1; i >= 0; i--) {
+          this.viewer.meshes.unshift(this.meshes[i]);
+        }
+        for (let i = this.parts.length - 1; i >= 0; i--) {
+          this.viewer.parts.unshift(this.parts[i]);
+        }
+      } else {
+        for (let i = 0; i < this.meshes.length; i++) {
+          this.viewer.meshes.pop();
+        }
+        for (let i = 0; i < this.parts.length; i++) {
+          this.viewer.parts.pop();
+        }
+        for (let i = 0; i < this.meshes.length; i++) {
+          this.viewer.meshes.push(this.meshes[i]);
+        }
+        for (let i = 0; i < this.parts.length; i++) {
+          this.viewer.parts.push(this.parts[i]);
+        }
+      }
+
+      this.viewer.scene.add(this.mesh);
+    }
+  }
+
+  addText(nr) {
+    for (let i = 0; i < this.positions.length; i++) {
+      let div = document.createElement("div");
+      div.className = "label";
+      div.style.position = 'absolute';
+      div.style.color = 'white';
+      div.style.textAlign = 'center';
+      div.style.display = '';
+      div.style.fontFamily = "'Fira Mono', Monaco, 'Andale Mono', 'Lucida Console', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace";
+      //div.style.margin = '-5px 0 0 15px';
+      div.style.pointerEvents = 'none';
+      div.style.webkitUserSelect = 'none';
+      div.style.mozUserSelect = 'none';
+      div.style.msUserSelect = 'none';
+      div.style.userSelect = 'none';
+
+      if (nr == 1) {
+        div.textContent = (i+1).toString();
+      } else {
+        let label = '';
+        if (i + 1 + 64 > 90) {
+          label = String.fromCharCode(i + 1 + 70);
+        } else {
+          label = String.fromCharCode(i + 1 + 64);
+        }    
+        div.textContent = label;
+      }
+      
+      let pos = new THREE.Vector3().copy(this.positions[i]).applyEuler(this.mesh.rotation).add(this.mesh.position);
+      let dis = pos.distanceTo(this.viewer.camera.perspectiveCamera.position);
+      pos.project(this.viewer.camera.perspectiveCamera);
+
+      this.viewer.raycaster.setFromCamera(pos, this.viewer.camera.perspectiveCamera);
+
+      let intersectedObjects = this.viewer.raycaster.intersectObjects(this.viewer.parts);
+      let show = intersectedObjects.length && this.parts[i] === intersectedObjects[0].object;
+
+
+      if (Math.abs(pos.z) > 1 || pos.x < -0.96 || pos.y < -0.96 || pos.x > 0.96 || pos.y > 0.96)  {
+        div.style.display = 'none';
+      } else {
+        div.style.fontSize = (150.0 / dis).toString() + 'px';
+        div.style.display = '';
+
+        if ((150.0 / dis)/(2*this.viewer.container.clientHeight) + pos.y > 1.0 || 
+            pos.y - (150.0 / dis)/(2*this.viewer.container.clientHeight) < -1.0 || 
+            (150.0 / dis)/(2*this.viewer.container.clientWidth) + pos.x > 1.0 || 
+            pos.x - (150.0 / dis)/(2*this.viewer.container.clientWidth) < -1.0) {
+          div.style.display = 'none';
+        }
+        div.style.zIndex = (-pos.z * .5 + .5) * 100000 | 0;
+
+        if (!show) {
+          //div.style.margin = '-5px 0 0 15px';
+          div.style.display = 'none';
+        }
+        
+        let x = (pos.x *  .5 + .5) * this.viewer.container.clientWidth;
+        let y = (pos.y * -.5 + .5) * this.viewer.container.clientHeight;
+        div.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
+        this.viewer.container.appendChild(div);
+      }
+
+    }
+  }
+
+  /**
+   * Return framstick position in the world
+   */
+  setPositions() {
+    this.positions = [];
+    let tempV = new THREE.Vector3();
+
+    for (let i = 0; i < this.parts.length; i++) {
+      let mesh = this.parts[i];
+
+      this.viewer.camera.perspectiveCamera.updateMatrixWorld(true, false);
+      mesh.getWorldPosition(tempV);
+      this.positions.push(tempV.clone());
+    }
+  }
+
+  /**
+  * Code below was taken from: http://fugue.synology.me:30000/grzegorzlatosinski/framsticks-js
+  * @author Grzegorz Latosiński
+  * @pull_date 22.01.2018
+  */
+  loadFromGenotype() {
+    this.mesh = new THREE.Group();
+
+    let model = GenotypeParser.getModelFromGenotype(this.genotype);
+
+    if (typeof model !== 'undefined') {
+      let partsforjoints = [];
+      this.meshes = [];
+      this.parts = [];
+      this.joints = [];
+
+      for (let i = 0; i < model.getPartCount(); i++) {
+        let m = this.partfactory.create(model.getPart(i), this.color);
+        partsforjoints.push(m.userData);
+        this.mesh.add(m)
+        this.parts.push(m);
+        this.meshes.push(m);
+      }
+
+      for (let i = 0; i < model.getJointCount(); i++) {
+        let m = this.jointfactory.create(model.getJoint(i), this.color, partsforjoints);
+        
+        this.mesh.add(m);
+        this.joints.push(m);
+        this.meshes.push(m);
+      }
+
+      new THREE.Box3().setFromObject(this.mesh).getCenter(this.mesh.position).multiplyScalar(-1);
+
+      for (let i = 0; i < this.mesh.children.length; i++) {
+        this.mesh.children[i].position.sub(this.avgPosition);
+      }
+    }
+  }
+}
+
+export default Framstick;
Index: js/human_3d_alignment/src/visualization/jointmeshfactory.js
===================================================================
--- js/human_3d_alignment/src/visualization/jointmeshfactory.js	(revision 881)
+++ js/human_3d_alignment/src/visualization/jointmeshfactory.js	(revision 911)
@@ -33,5 +33,5 @@
      * @returns {Mesh}  Mesh for a given joint
      */
-    getNewJointMesh(joint, shapeConfig) {
+    getNewJointMesh(joint, color, shapeConfig) {
         let firstPartPosVec = new THREE.Vector3(
             joint.get_part1().get_p().get_x(), 
@@ -42,24 +42,11 @@
             joint.get_part2().get_p().get_y(), 
             joint.get_part2().get_p().get_z());
-        //let line = new THREE.LineCurve3(firstPartPosVec, secondPartPosVec);
-        //let geometry = new THREE.TubeGeometry(line, numsegmentstube, shapeConfig.radius, 
-        //    shapeConfig.radiusSegments, false);
 
         let direction = new THREE.Vector3().subVectors(secondPartPosVec, firstPartPosVec);
-        let orientation = new THREE.Matrix4();
-
-        let geometry = new THREE.CylinderGeometry(shapeConfig.radius, shapeConfig.radius, direction.length(), shapeConfig.radiusSegments);
-        
-
-        let material = this.transformations.getNewMaterial(
-            joint.get_vcolor().get_x(), 
-            joint.get_vcolor().get_y(), 
-            joint.get_vcolor().get_z());
-        material.transparent = shapeConfig.isTransparent;
-        material.opacity = shapeConfig.opacity;
-        //let mesh = new THREE.Mesh(geometry, material);
-        
+        let geometry = new THREE.CylinderGeometry(shapeConfig.radius, shapeConfig.radius, direction.length() - 2 * 0.18, shapeConfig.radiusSegments);     
+        let material = this.transformations.getNewMaterial(color);   
         let mesh = new THREE.Mesh( geometry, material ); //new Physijs.CylinderMesh( geometry, Physijs.createMaterial(material) ); //new THREE.Mesh( geometry, material );
 
+        let orientation = new THREE.Matrix4();
         orientation.lookAt(firstPartPosVec, secondPartPosVec, new THREE.Object3D().up);
         orientation.multiply(new THREE.Matrix4().set(
@@ -82,5 +69,5 @@
             mesh: mesh, 
             connectedParts: [], 
-            showTransparent: shapeConfig.isTransparent 
+            showTransparent: true 
         };
         return mesh;
@@ -115,12 +102,12 @@
      * @returns {JointMesh} new joint mesh, for properties of Object look at addConnectionInfo jointMesh param documentation
      */
-    create(joint, partMeshes) {
+    create(joint, color, partMeshes) {
         let result;
         let shape = joint.get_shape();
 
         if (this.jointShapes['SHAPE_FIXED'].value == shape) {
-            result = this.getNewJointMesh(joint, this.config.linkShape);
+            result = this.getNewJointMesh(joint, color, this.config.linkShape);
         } else {
-            result = this.getNewJointMesh(joint, this.config.cylinderShape);
+            result = this.getNewJointMesh(joint, color, this.config.cylinderShape);
         }
 
Index: js/human_3d_alignment/src/visualization/partmeshfactory.js
===================================================================
--- js/human_3d_alignment/src/visualization/partmeshfactory.js	(revision 881)
+++ js/human_3d_alignment/src/visualization/partmeshfactory.js	(revision 911)
@@ -36,10 +36,7 @@
      * @returns {PartMesh} info about part mesh
      */
-    getNewSphereMesh(part, sphereRadius, segments, applyScale) {
+    getNewSphereMesh(part, color, sphereRadius, segments, applyScale) {
         let geometry = new THREE.SphereGeometry(sphereRadius, segments, segments);
-        let material = this.transformations.getNewMaterial(
-            part.get_vcolor().get_x(), 
-            part.get_vcolor().get_y(), 
-            part.get_vcolor().get_z());
+        let material = this.transformations.getNewMaterial(color);
         let mesh = null;
         if (applyScale) {
@@ -94,5 +91,5 @@
      * @returns {PartMesh} info about part mesh
      */
-    getNewBoxMesh(part) {
+    getNewBoxMesh(part, color) {
         let geometry = new THREE.BoxGeometry(2, 2, 2);
         geometry.scale(
@@ -101,8 +98,5 @@
             part.get_scale().get_z());
 
-        let material = this.transformations.getNewMaterial(
-            part.get_vcolor().get_x(), 
-            part.get_vcolor().get_y(), 
-            part.get_vcolor().get_z());
+        let material = this.transformations.getNewMaterial(color);
         let mesh = new THREE.Mesh(geometry, material);
         mesh.position.set(
@@ -133,10 +127,7 @@
      * @returns {PartMesh} info about part mesh
      */
-    getNewCylinderMesh(part) {
+    getNewCylinderMesh(part, color) {
         let geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
-        let material = this.transformations.getNewMaterial(
-            part.get_vcolor().get_x(), 
-            part.get_vcolor().get_y(), 
-            part.get_vcolor().get_z());
+        let material = this.transformations.getNewMaterial(color);
 
         geometry.scale(
@@ -181,5 +172,5 @@
      * @returns {PartMesh} info about part mesh
      */
-    create(part) {
+    create(part, color) {
 
         let shape = part.get_shape();
@@ -187,15 +178,17 @@
             return this.getNewSphereMesh(
                 part, 
+                color,
                 this.config.ellipsoidShape.radius, 
                 this.config.ellipsoidShape.segments, true);
         }
         else if (this.partShapes['SHAPE_CUBOID'].value == shape) {
-            return this.getNewBoxMesh(part);
+            return this.getNewBoxMesh(part, color);
         }
         else if (this.partShapes['SHAPE_CYLINDER'].value == shape) {
-            return this.getNewCylinderMesh(part);
+            return this.getNewCylinderMesh(part, color);
         }
         return this.getNewSphereMesh(
             part, 
+            color,
             this.config.defaultShape.radius, 
             this.config.defaultShape.segments, 
Index: js/human_3d_alignment/src/visualization/sviewer.js
===================================================================
--- js/human_3d_alignment/src/visualization/sviewer.js	(revision 881)
+++ js/human_3d_alignment/src/visualization/sviewer.js	(revision 911)
@@ -3,10 +3,8 @@
 
 import * as THREE from 'three';
-import TrackballControls from 'three-trackballcontrols';
-import PartMeshFactory from './partmeshfactory';
-import JointMeshFactory from './jointmeshfactory';
+import Framstick from './framstick';
 import Scene from './scene';
 import Camera from './camera';
-import { geometry } from './transformations';
+const TransformControls = require('three-transform-controls')(THREE);
 
 /** Camera class configuration for Viewer */
@@ -66,14 +64,14 @@
      */
     constructor(width, height, canvasdom) {
+        this.container = document.getElementById("simcontainer");
+
+        this.meshes = [];
         this.parts = [];
-        this.joints = [];
-        this.meshes = [];
-        this.parts2 = [];
-        this.joints2 = [];
-        this.meshes2 = [];
-        this.creature1 = new THREE.Group();
-        this.creature2 = new THREE.Group();
-        this.partfactory = new PartMeshFactory(geometry.part);
-        this.jointfactory = new JointMeshFactory(geometry.joint);
+        this.lines = [];
+        this.framstick1 = null;
+        this.framstick2 = null;
+        this.selected1 = [];
+        this.selected2 = [];
+
         this.renderer = new THREE.WebGLRenderer({
             antialias: true,
@@ -85,5 +83,15 @@
         this.scene = new Scene();
         this.camera = new Camera(cameraconfig, this.renderer.domElement, false);
-        //console.log(this.camera);
+        this.control = new TransformControls(this.camera.getPerspectiveCamera(), this.renderer.domElement);
+        this.control.addEventListener( 'change', (e) => {
+            this.addLines(this.selected1, this.selected2);
+            this.addText();
+        });
+        this.control.addEventListener( 'dragging-changed', function(e) {
+            this.camera.getCameraControl().enable = ! e.value;
+        });
+        this.scene.add(this.control);
+        this.control.setMode( "translate" );
+
         let ambientLight = new THREE.AmbientLight(lightconfig.ambient.color);
         this.scene.add(ambientLight);
@@ -100,45 +108,126 @@
         bottomDirectionalLight.position.set(0, 0, lightconfig.directional.bottom.positionZ);
         this.scene.add(bottomDirectionalLight);
+
         this.renderer.setClearColor('gray');
-        this.rezoom = true;
+        this.rezoom = false;
+        this.autorotate = false;
         this.renderScene = this.renderScene.bind(this);
         this.selectedelements = [];
 
         this.mouse = new THREE.Vector2();
-        this.offset = new THREE.Vector3();
-        this.INTERSECTED = null;
         this.SELECTED = null;
-
-        this.plane = new THREE.Mesh( new THREE.PlaneGeometry(500, 500, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
-        this.plane.visible = true;
-        this.scene.add( this.plane ); 
-
-        this.controls = new TrackballControls( this.camera.getPerspectiveCamera() );
-        this.projector = new THREE.Projector();
-        this.controls.target = new THREE.Vector3(0, 0, 0);
-        this.controls.maxDistance = 150;
-        this.controls2 = null;
-    }
-
-    addMesh(meshes, parts, joints, model, creature)
-    {
-        let partsforjoints = [];
-        meshes = [];
-        parts = [];
-        joints = [];
-        for (let i = 0; i < model.getPartCount(); i++) {
-            let mesh = this.partfactory.create(model.getPart(i));
-            partsforjoints.push(mesh.userData);
-            meshes.push(mesh);
-            parts.push(mesh);
-            creature.add(mesh);
-        }
-
-        for (let i = 0; i < model.getJointCount(); i++) {
-            let mesh = this.jointfactory.create(model.getJoint(i), partsforjoints);
-            meshes.push(mesh);
-            joints.push(mesh);
-            creature.add(mesh);
-        }
+        this.CLICKED = false;
+
+
+        this.lineMaterial = new THREE.LineBasicMaterial({
+            color: 0xffff00,
+            transparent: true,
+            opacity: 0.5
+        });
+
+        this.textLabels = [];
+        this.container = document.getElementById("simcontainer");
+    }
+
+    /**
+     * Allow to clear view and add new pair of genotypes
+     * @param {string} genotype1 Genotype of first framstick
+     * @param {string} genotype2 Genotype of second framstick
+     */
+    add2Genotypes(genotype1, genotype2) {
+        this.clearView();
+
+        this.framstick1 = new Framstick(genotype1, this);
+        this.framstick2 = new Framstick(genotype2, this);
+
+        this.meshes = [];
+        this.parts = [];
+
+        for (let i = 0; i < this.framstick1.mesh.children.length; i++) {
+            this.meshes.push(this.framstick1.mesh.children[i]);
+        }
+
+        for (let i = 0; i < this.framstick2.mesh.children.length; i++) {
+            this.meshes.push(this.framstick2.mesh.children[i]);
+        }
+
+        for (let i = 0; i < this.framstick1.parts.length; i++) {
+            this.parts.push(this.framstick1.parts[i]);
+        }
+
+        for (let i = 0; i < this.framstick2.parts.length; i++) {
+            this.parts.push(this.framstick2.parts[i]);
+        }
+
+        this.framstick1.mesh.position.set( 0, -2, 0 );
+        this.framstick2.mesh.position.set( 0, 2, 0 );
+
+        this.framstick1.setPositions();
+        this.framstick2.setPositions();
+
+        this.framstick1.setColor('red');
+        this.framstick2.setColor('blue');
+
+        this.camera.zoomAll(this.meshes);
+        this.addText();
+    }
+
+    /**
+     * Draw lines between selected parts of both framsticks
+     * @param {Array} selected1 array of values that user selected in fitview for first genotype
+     * @param {Array} selected2 array of values that user selected in fitview for second genotype
+     */
+    addLines(selected1, selected2) {
+        for (let i = 0; i < this.lines.length; i++) {
+            this.scene.remove(this.lines[i]);
+        }
+
+        this.lines = [];
+
+        let pairs = (selected1.length + selected2.length) / 2;
+
+        for (let i = 0; i < pairs; i++) {
+            if (selected1[i] != ' ' && selected2[i] != ' ') {
+                let index1 = parseInt(selected1[i]) - 1;
+                let index2 = selected2[i].charCodeAt(0) - 65;
+
+                let tempV1 = new THREE.Vector3().copy(this.framstick1.positions[index1]).applyEuler(this.framstick1.mesh.rotation).add(this.framstick1.mesh.position);
+                let tempV2 = new THREE.Vector3().copy(this.framstick2.positions[index2]).applyEuler(this.framstick2.mesh.rotation).add(this.framstick2.mesh.position);
+
+                let geometry = new THREE.Geometry();
+                geometry.vertices.push( tempV1 );
+                geometry.vertices.push( tempV2 );
+
+                let line = new THREE.Line( geometry, this.lineMaterial );
+                this.lines.push(line);
+            }
+        }
+
+        for (let i = 0; i < this.lines.length; i++) {
+            this.scene.add(this.lines[i]);
+        }
+    }
+
+    addText() {
+
+        while (this.container.children.length > 3){
+            this.container.removeChild(this.container.lastChild)
+        }
+
+        this.textLabels = [];
+
+        if (this.framstick1 != null && this.framstick2 != null) {
+            this.framstick1.addText(1);
+            this.framstick2.addText(2);
+        }
+
+    }
+
+    /**
+     * Allow to change mode of TransformControls
+     * @param {string} mode Selected mode of transformcontrols
+     */
+    setMode(mode) {
+        this.control.setMode(mode);
     }
 
@@ -150,74 +239,55 @@
      */
     handleMouseDown(position) {
-      this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() );  
-      let intersectsC1 = this.raycaster.intersectObjects( this.creature1.children );
-            let intersectsC2 = this.raycaster.intersectObjects( this.creature2.children );
-
-				if ( intersectsC1.length > 0 || intersectsC2.length > 0 ) {
-                    
-					this.controls.enabled = false;
-                    let obj = intersectsC1.length > 0 ? this.creature1 : this.creature2;
-					this.SELECTED = obj;
-					let intersects = this.raycaster.intersectObject( this.plane );
-					this.offset.copy( intersects[ 0 ].point ).sub( this.plane.position );
-				}
+        this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() );  
+        let intersectsC1 = this.raycaster.intersectObjects( this.framstick1.mesh.children );
+        let intersectsC2 = this.raycaster.intersectObjects( this.framstick2.mesh.children );
+
+        if ( intersectsC1.length > 0 || intersectsC2.length > 0 ) {
+            
+            let obj = intersectsC1.length > 0 ? this.framstick1 : this.framstick2;
+
+            if ( this.SELECTED ) {
+                if (this.SELECTED == obj) {
+                    if (this.SELECTED == this.framstick1) {
+                        obj.setColor('red');
+                    } else {
+                        obj.setColor('blue');
+                    }
+                    this.control.detach();
+                    this.SELECTED = null;
+                } else {
+                    if (this.SELECTED == this.framstick1) {
+                        this.SELECTED.setColor('red');
+                    } else {
+                        this.SELECTED.setColor('blue');
+                    }
+                    this.control.detach();
+                    obj.setColor('white');   
+                    this.SELECTED = obj;      
+                    this.control.attach( obj.mesh );     
+                }
+            } else {
+                this.control.detach();
+                obj.setColor('white');
+                this.SELECTED = obj;  
+                this.control.attach( obj.mesh );
+            }
+        } else {
+            if (this.SELECTED) {
+                if (this.SELECTED == this.framstick1) {
+                    this.SELECTED.setColor('red');
+                } else {
+                    this.SELECTED.setColor('blue');
+                }
+                this.control.detach();
+                this.SELECTED = null;
+            }
+        }
     }
 
     handleMouseUp() {
-        this.controls.enabled = true;
-        this.SELECTED = null;
-
-        if (this.INTERSECTED)
-        {
-            this.plane.position.copy(this.INTERSECTED.position);
-            this.SELECTED = null;
-        }
     }
 
     handleMouseMove(position) {
-        this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() );
-        if ( this.SELECTED ) {
-            let intersects = this.raycaster.intersectObject( this.plane );
-            if (intersects[ 0 ])
-                {this.SELECTED.position.copy( intersects[ 0 ].point.sub( this.offset ) );}
-            return;
-        }
-
-            let intersectsC1 = this.raycaster.intersectObjects(this.creature1.children);
-            let intersectsC2 = this.raycaster.intersectObjects(this.creature2.children);
-            if (intersectsC1.length > 0 || intersectsC2.length > 0)
-            {
-                let obj = intersectsC1.length > 0 ? this.creature1 : this.creature2;
-                this.INTERSECTED = obj;
-                this.plane.position.copy( obj.position );
-                this.plane.lookAt( this.camera.getPerspectiveCamera().position );
-            }
-            else
-            {
-                this.INTERSECTED = null;
-            }
-        
-    }
-
-    /**
-     * Method uses ready Model to create and add meshes to the scene. If model is 
-     * undefined, an empty scene will be rendered.
-     * @param {Module.Model} model input model 1
-     * @param {Module.Model} model input model 2
-     */
-    loadMeshesFromModel(model, model2) {
-        this.clearView();
-        if (typeof model !== 'undefined') {
-
-            this.addMesh(this.meshes, this.parts, this.joints, model, this.creature1);
-            this.addMesh(this.meshes2, this.parts2, this.joints2, model2, this.creature2);
-            this.creature2.position.set( 0, 0, 0 );
-            this.creature2.position.set( 0, -1, 0 );
-            this.scene.add(this.creature1);
-            this.scene.add(this.creature2);
-            if (this.rezoom) {
-                this.camera.zoomAll(this.meshes);
-            }
-        }
     }
 
@@ -251,5 +321,4 @@
         this.camera.getPerspectiveCamera().updateProjectionMatrix();
         this.renderer.setSize(width, height);
-        //console.log(this.renderer.getSize());
         this.renderer.setPixelRatio(window.devicePixelRatio || 1);
     }
@@ -262,5 +331,7 @@
     setRezoom(rezoom) {
         this.rezoom = rezoom;
-        this.camera.zoomAll(this.meshes);
+        if (this.rezoom) {
+            this.camera.zoomAll(this.meshes);
+        }
     }
 
@@ -277,5 +348,14 @@
      */
     clearView() {
-        this.scene.clear();
+        if (this.framstick1 != null && this.framstick2 != null) {
+            this.scene.remove(this.framstick1.mesh);
+            this.scene.remove(this.framstick2.mesh);
+        }
+        this.control.detach();
+        while (this.container.children.length > 3) {
+            this.container.removeChild(this.container.lastChild)
+        }
+
+        this.SELECTED = null;
     }
 
Index: js/human_3d_alignment/src/visualization/transformations.js
===================================================================
--- js/human_3d_alignment/src/visualization/transformations.js	(revision 881)
+++ js/human_3d_alignment/src/visualization/transformations.js	(revision 911)
@@ -45,13 +45,9 @@
         cylinderShape: {
             radius: 0.1,
-            radiusSegments: 10,
-            isTransparent: false,
-            opacity: 1
+            radiusSegments: 10
         },
         linkShape: {
             radius: 0.04,
-            radiusSegments: 10,
-            isTransparent: true,
-            opacity: 0.2
+            radiusSegments: 10
         }
     }
@@ -186,10 +182,12 @@
      * @returns {MeshPhongMaterial} new material for Mesh
      */
-    getNewMaterial(r, g, b) {
-        let color = new THREE.Color(
-            this.calcColorComponent(r), 
-            this.calcColorComponent(g), 
-            this.calcColorComponent(b));
-        return new THREE.MeshPhongMaterial({ color: color });
+    getNewMaterial(color) {
+        return new THREE.MeshPhongMaterial({
+            color: color,
+            transparent: true,
+            opacity: 0.6,
+            reflectivity: 0.2,
+            shininess: 600
+        });
     }
 
