Ignore:
Timestamp:
04/18/20 20:18:36 (4 years ago)
Author:
Maciej Komosinski
Message:

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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • js/human_3d_alignment/src/visualization/sviewer.js

    r881 r911  
    33
    44import * as THREE from 'three';
    5 import TrackballControls from 'three-trackballcontrols';
    6 import PartMeshFactory from './partmeshfactory';
    7 import JointMeshFactory from './jointmeshfactory';
     5import Framstick from './framstick';
    86import Scene from './scene';
    97import Camera from './camera';
    10 import { geometry } from './transformations';
     8const TransformControls = require('three-transform-controls')(THREE);
    119
    1210/** Camera class configuration for Viewer */
    … …  
    6664     */
    6765    constructor(width, height, canvasdom) {
     66        this.container = document.getElementById("simcontainer");
     67
     68        this.meshes = [];
    6869        this.parts = [];
    69         this.joints = [];
    70         this.meshes = [];
    71         this.parts2 = [];
    72         this.joints2 = [];
    73         this.meshes2 = [];
    74         this.creature1 = new THREE.Group();
    75         this.creature2 = new THREE.Group();
    76         this.partfactory = new PartMeshFactory(geometry.part);
    77         this.jointfactory = new JointMeshFactory(geometry.joint);
     70        this.lines = [];
     71        this.framstick1 = null;
     72        this.framstick2 = null;
     73        this.selected1 = [];
     74        this.selected2 = [];
     75
    7876        this.renderer = new THREE.WebGLRenderer({
    7977            antialias: true,
    … …  
    8583        this.scene = new Scene();
    8684        this.camera = new Camera(cameraconfig, this.renderer.domElement, false);
    87         //console.log(this.camera);
     85        this.control = new TransformControls(this.camera.getPerspectiveCamera(), this.renderer.domElement);
     86        this.control.addEventListener( 'change', (e) => {
     87            this.addLines(this.selected1, this.selected2);
     88            this.addText();
     89        });
     90        this.control.addEventListener( 'dragging-changed', function(e) {
     91            this.camera.getCameraControl().enable = ! e.value;
     92        });
     93        this.scene.add(this.control);
     94        this.control.setMode( "translate" );
     95
    8896        let ambientLight = new THREE.AmbientLight(lightconfig.ambient.color);
    8997        this.scene.add(ambientLight);
    … …  
    100108        bottomDirectionalLight.position.set(0, 0, lightconfig.directional.bottom.positionZ);
    101109        this.scene.add(bottomDirectionalLight);
     110
    102111        this.renderer.setClearColor('gray');
    103         this.rezoom = true;
     112        this.rezoom = false;
     113        this.autorotate = false;
    104114        this.renderScene = this.renderScene.bind(this);
    105115        this.selectedelements = [];
    106116
    107117        this.mouse = new THREE.Vector2();
    108         this.offset = new THREE.Vector3();
    109         this.INTERSECTED = null;
    110118        this.SELECTED = null;
    111 
    112         this.plane = new THREE.Mesh( new THREE.PlaneGeometry(500, 500, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
    113         this.plane.visible = true;
    114         this.scene.add( this.plane );
    115 
    116         this.controls = new TrackballControls( this.camera.getPerspectiveCamera() );
    117         this.projector = new THREE.Projector();
    118         this.controls.target = new THREE.Vector3(0, 0, 0);
    119         this.controls.maxDistance = 150;
    120         this.controls2 = null;
    121     }
    122 
    123     addMesh(meshes, parts, joints, model, creature)
    124     {
    125         let partsforjoints = [];
    126         meshes = [];
    127         parts = [];
    128         joints = [];
    129         for (let i = 0; i < model.getPartCount(); i++) {
    130             let mesh = this.partfactory.create(model.getPart(i));
    131             partsforjoints.push(mesh.userData);
    132             meshes.push(mesh);
    133             parts.push(mesh);
    134             creature.add(mesh);
    135         }
    136 
    137         for (let i = 0; i < model.getJointCount(); i++) {
    138             let mesh = this.jointfactory.create(model.getJoint(i), partsforjoints);
    139             meshes.push(mesh);
    140             joints.push(mesh);
    141             creature.add(mesh);
    142         }
     119        this.CLICKED = false;
     120
     121
     122        this.lineMaterial = new THREE.LineBasicMaterial({
     123            color: 0xffff00,
     124            transparent: true,
     125            opacity: 0.5
     126        });
     127
     128        this.textLabels = [];
     129        this.container = document.getElementById("simcontainer");
     130    }
     131
     132    /**
     133     * Allow to clear view and add new pair of genotypes
     134     * @param {string} genotype1 Genotype of first framstick
     135     * @param {string} genotype2 Genotype of second framstick
     136     */
     137    add2Genotypes(genotype1, genotype2) {
     138        this.clearView();
     139
     140        this.framstick1 = new Framstick(genotype1, this);
     141        this.framstick2 = new Framstick(genotype2, this);
     142
     143        this.meshes = [];
     144        this.parts = [];
     145
     146        for (let i = 0; i < this.framstick1.mesh.children.length; i++) {
     147            this.meshes.push(this.framstick1.mesh.children[i]);
     148        }
     149
     150        for (let i = 0; i < this.framstick2.mesh.children.length; i++) {
     151            this.meshes.push(this.framstick2.mesh.children[i]);
     152        }
     153
     154        for (let i = 0; i < this.framstick1.parts.length; i++) {
     155            this.parts.push(this.framstick1.parts[i]);
     156        }
     157
     158        for (let i = 0; i < this.framstick2.parts.length; i++) {
     159            this.parts.push(this.framstick2.parts[i]);
     160        }
     161
     162        this.framstick1.mesh.position.set( 0, -2, 0 );
     163        this.framstick2.mesh.position.set( 0, 2, 0 );
     164
     165        this.framstick1.setPositions();
     166        this.framstick2.setPositions();
     167
     168        this.framstick1.setColor('red');
     169        this.framstick2.setColor('blue');
     170
     171        this.camera.zoomAll(this.meshes);
     172        this.addText();
     173    }
     174
     175    /**
     176     * Draw lines between selected parts of both framsticks
     177     * @param {Array} selected1 array of values that user selected in fitview for first genotype
     178     * @param {Array} selected2 array of values that user selected in fitview for second genotype
     179     */
     180    addLines(selected1, selected2) {
     181        for (let i = 0; i < this.lines.length; i++) {
     182            this.scene.remove(this.lines[i]);
     183        }
     184
     185        this.lines = [];
     186
     187        let pairs = (selected1.length + selected2.length) / 2;
     188
     189        for (let i = 0; i < pairs; i++) {
     190            if (selected1[i] != ' ' && selected2[i] != ' ') {
     191                let index1 = parseInt(selected1[i]) - 1;
     192                let index2 = selected2[i].charCodeAt(0) - 65;
     193
     194                let tempV1 = new THREE.Vector3().copy(this.framstick1.positions[index1]).applyEuler(this.framstick1.mesh.rotation).add(this.framstick1.mesh.position);
     195                let tempV2 = new THREE.Vector3().copy(this.framstick2.positions[index2]).applyEuler(this.framstick2.mesh.rotation).add(this.framstick2.mesh.position);
     196
     197                let geometry = new THREE.Geometry();
     198                geometry.vertices.push( tempV1 );
     199                geometry.vertices.push( tempV2 );
     200
     201                let line = new THREE.Line( geometry, this.lineMaterial );
     202                this.lines.push(line);
     203            }
     204        }
     205
     206        for (let i = 0; i < this.lines.length; i++) {
     207            this.scene.add(this.lines[i]);
     208        }
     209    }
     210
     211    addText() {
     212
     213        while (this.container.children.length > 3){
     214            this.container.removeChild(this.container.lastChild)
     215        }
     216
     217        this.textLabels = [];
     218
     219        if (this.framstick1 != null && this.framstick2 != null) {
     220            this.framstick1.addText(1);
     221            this.framstick2.addText(2);
     222        }
     223
     224    }
     225
     226    /**
     227     * Allow to change mode of TransformControls
     228     * @param {string} mode Selected mode of transformcontrols
     229     */
     230    setMode(mode) {
     231        this.control.setMode(mode);
    143232    }
    144233
    … …  
    150239     */
    151240    handleMouseDown(position) {
    152       this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() ); 
    153       let intersectsC1 = this.raycaster.intersectObjects( this.creature1.children );
    154             let intersectsC2 = this.raycaster.intersectObjects( this.creature2.children );
    155 
    156                                 if ( intersectsC1.length > 0 || intersectsC2.length > 0 ) {
    157                    
    158                                         this.controls.enabled = false;
    159                     let obj = intersectsC1.length > 0 ? this.creature1 : this.creature2;
    160                                         this.SELECTED = obj;
    161                                         let intersects = this.raycaster.intersectObject( this.plane );
    162                                         this.offset.copy( intersects[ 0 ].point ).sub( this.plane.position );
    163                                 }
     241        this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() ); 
     242        let intersectsC1 = this.raycaster.intersectObjects( this.framstick1.mesh.children );
     243        let intersectsC2 = this.raycaster.intersectObjects( this.framstick2.mesh.children );
     244
     245        if ( intersectsC1.length > 0 || intersectsC2.length > 0 ) {
     246           
     247            let obj = intersectsC1.length > 0 ? this.framstick1 : this.framstick2;
     248
     249            if ( this.SELECTED ) {
     250                if (this.SELECTED == obj) {
     251                    if (this.SELECTED == this.framstick1) {
     252                        obj.setColor('red');
     253                    } else {
     254                        obj.setColor('blue');
     255                    }
     256                    this.control.detach();
     257                    this.SELECTED = null;
     258                } else {
     259                    if (this.SELECTED == this.framstick1) {
     260                        this.SELECTED.setColor('red');
     261                    } else {
     262                        this.SELECTED.setColor('blue');
     263                    }
     264                    this.control.detach();
     265                    obj.setColor('white');   
     266                    this.SELECTED = obj;     
     267                    this.control.attach( obj.mesh );     
     268                }
     269            } else {
     270                this.control.detach();
     271                obj.setColor('white');
     272                this.SELECTED = obj; 
     273                this.control.attach( obj.mesh );
     274            }
     275        } else {
     276            if (this.SELECTED) {
     277                if (this.SELECTED == this.framstick1) {
     278                    this.SELECTED.setColor('red');
     279                } else {
     280                    this.SELECTED.setColor('blue');
     281                }
     282                this.control.detach();
     283                this.SELECTED = null;
     284            }
     285        }
    164286    }
    165287
    166288    handleMouseUp() {
    167         this.controls.enabled = true;
    168         this.SELECTED = null;
    169 
    170         if (this.INTERSECTED)
    171         {
    172             this.plane.position.copy(this.INTERSECTED.position);
    173             this.SELECTED = null;
    174         }
    175289    }
    176290
    177291    handleMouseMove(position) {
    178         this.raycaster.setFromCamera( position, this.camera.getPerspectiveCamera() );
    179         if ( this.SELECTED ) {
    180             let intersects = this.raycaster.intersectObject( this.plane );
    181             if (intersects[ 0 ])
    182                 {this.SELECTED.position.copy( intersects[ 0 ].point.sub( this.offset ) );}
    183             return;
    184         }
    185 
    186             let intersectsC1 = this.raycaster.intersectObjects(this.creature1.children);
    187             let intersectsC2 = this.raycaster.intersectObjects(this.creature2.children);
    188             if (intersectsC1.length > 0 || intersectsC2.length > 0)
    189             {
    190                 let obj = intersectsC1.length > 0 ? this.creature1 : this.creature2;
    191                 this.INTERSECTED = obj;
    192                 this.plane.position.copy( obj.position );
    193                 this.plane.lookAt( this.camera.getPerspectiveCamera().position );
    194             }
    195             else
    196             {
    197                 this.INTERSECTED = null;
    198             }
    199        
    200     }
    201 
    202     /**
    203      * Method uses ready Model to create and add meshes to the scene. If model is
    204      * undefined, an empty scene will be rendered.
    205      * @param {Module.Model} model input model 1
    206      * @param {Module.Model} model input model 2
    207      */
    208     loadMeshesFromModel(model, model2) {
    209         this.clearView();
    210         if (typeof model !== 'undefined') {
    211 
    212             this.addMesh(this.meshes, this.parts, this.joints, model, this.creature1);
    213             this.addMesh(this.meshes2, this.parts2, this.joints2, model2, this.creature2);
    214             this.creature2.position.set( 0, 0, 0 );
    215             this.creature2.position.set( 0, -1, 0 );
    216             this.scene.add(this.creature1);
    217             this.scene.add(this.creature2);
    218             if (this.rezoom) {
    219                 this.camera.zoomAll(this.meshes);
    220             }
    221         }
    222292    }
    223293
    … …  
    251321        this.camera.getPerspectiveCamera().updateProjectionMatrix();
    252322        this.renderer.setSize(width, height);
    253         //console.log(this.renderer.getSize());
    254323        this.renderer.setPixelRatio(window.devicePixelRatio || 1);
    255324    }
    … …  
    262331    setRezoom(rezoom) {
    263332        this.rezoom = rezoom;
    264         this.camera.zoomAll(this.meshes);
     333        if (this.rezoom) {
     334            this.camera.zoomAll(this.meshes);
     335        }
    265336    }
    266337
    … …  
    277348     */
    278349    clearView() {
    279         this.scene.clear();
     350        if (this.framstick1 != null && this.framstick2 != null) {
     351            this.scene.remove(this.framstick1.mesh);
     352            this.scene.remove(this.framstick2.mesh);
     353        }
     354        this.control.detach();
     355        while (this.container.children.length > 3) {
     356            this.container.removeChild(this.container.lastChild)
     357        }
     358
     359        this.SELECTED = null;
    280360    }
    281361
Note: See TracChangeset for help on using the changeset viewer.