Changeset 911 for js/human_3d_alignment/src/visualization

Timestamp:

04/18/20 20:18:36 (5 years ago)

Author:

Maciej Komosinski

Message:

Added the actual functionality of the app in place of previous draft

Location:

js/human_3d_alignment/src/visualization

Files:

• camera.js (modified) (1 diff)
• framstick.js (added)
• jointmeshfactory.js (modified) (4 diffs)
• partmeshfactory.js (modified) (6 diffs)
• sviewer.js (modified) (8 diffs)
• transformations.js (modified) (2 diffs)

js/human_3d_alignment/src/visualization/camera.js

@@ -87 +87 @@
         let modelSphere = modelBox.getBoundingSphere();
 
+        this.targetPosition = modelSphere.center.clone();
+        this.cameraPosition = modelSphere.center.clone().addScalar(modelSphere.radius);
+
         return {
             target: {

js/human_3d_alignment/src/visualization/jointmeshfactory.js

@@ -33 +33 @@
      * @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 +42 @@
             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 +69 @@
             mesh: mesh, 
             connectedParts: [], 
-            showTransparent: shapeConfig.isTransparent 
+            showTransparent: true 
         };
         return mesh;
@@ -115 +102 @@
      * @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);
         }
 

js/human_3d_alignment/src/visualization/partmeshfactory.js

@@ -36 +36 @@
      * @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 +91 @@
      * @returns {PartMesh} info about part mesh
      */
-    getNewBoxMesh(part) {
+    getNewBoxMesh(part, color) {
         let geometry = new THREE.BoxGeometry(2, 2, 2);
         geometry.scale(
@@ -101 +98 @@
             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 +127 @@
      * @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 +172 @@
      * @returns {PartMesh} info about part mesh
      */
-    create(part) {
+    create(part, color) {
 
         let shape = part.get_shape();
@@ -187 +178 @@
             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, 

js/human_3d_alignment/src/visualization/sviewer.js

@@ -3 +3 @@
 
 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 +64 @@
      */
     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 +83 @@
         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 +108 @@
         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 +239 @@
      */
     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 +321 @@
         this.camera.getPerspectiveCamera().updateProjectionMatrix();
         this.renderer.setSize(width, height);
-        //console.log(this.renderer.getSize());
         this.renderer.setPixelRatio(window.devicePixelRatio || 1);
     }
@@ -262 +331 @@
     setRezoom(rezoom) {
         this.rezoom = rezoom;
-        this.camera.zoomAll(this.meshes);
+        if (this.rezoom) {
+            this.camera.zoomAll(this.meshes);
+        }
     }
 
@@ -277 +348 @@
      */
     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;
     }
 

js/human_3d_alignment/src/visualization/transformations.js

@@ -45 +45 @@
         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 +182 @@
      * @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
+        });
     }