source: js/human_3d_alignment/src/visualization/camera.js @ 881

Last change on this file since 881 was 881, checked in by Maciej Komosinski, 5 years ago

Initial, prototype version of a javascript app to test how humans align two 3D structures

File size: 4.9 KB
Line 
1"use strict";
2import * as THREE from 'three';
3
4const OrbitControls = require('three-orbit-controls')(THREE);
5
6/**
7 * Class for creating camera object in THREE.js view. it uses OrbitControls for
8 * user moving. It is designed to work with model analysis.
9 */
10class Camera {
11    /**
12     * Method for Camera initialization. It's adjusting the view according to
13     * camera resize, prepares OrbitControls as default controller.
14     */
15    init() {
16        this.perspectiveCamera = new THREE.PerspectiveCamera(
17            this.config.fieldOfView,
18            window.innerWidth / window.innerHeight,
19            this.config.near,
20            this.config.far
21        );
22        this.perspectiveCamera.up.set(0,0,1);
23        this.cameraControl = new OrbitControls(this.perspectiveCamera, this.rendererDOMElement);
24        this.cameraControl.autoRotate = this.autoRotate;
25        this.cameraControl.autoRotateSpeed = this.config.autoRotateSpeed;
26        this.cameraControl.enableKeys = false;
27    }
28
29    /**
30     * Creates instance of camera, then initalizes it with init() method
31     * @param {{fieldOfView: number, near: number, far: number}} config Configuration of Camera view
32     * @param {Element} rendererDOMElement Canvas in which element will be drawn.
33     * @param {boolean} autoRotate true if camera should rotate, false otherwise
34     */
35    constructor(config, rendererDOMElement, autoRotate) {
36        this.config = config;
37        this.rendererDOMElement = rendererDOMElement;
38        this.autoRotate = autoRotate;
39        this.perspectiveCamera = null;
40        this.cameraControl = null;
41        this.init();
42    }
43
44    /**
45     * Method for updating modelBox coordinates
46     * @param {{min: {x: number, y: number, z: number}, max: {x: number, y: number, z: number}}} modelBox Bounding box of Model
47     * @param {{min: {x: number, y: number, z: number}, max: {x: number, y: number, z: number}}} box update of bounding box
48     */
49    updateModelBox(modelBox, box) {
50        modelBox.min.x = Math.min( modelBox.min.x, box.min.x );
51        modelBox.min.y = Math.min( modelBox.min.y, box.min.y );
52        modelBox.min.z = Math.min( modelBox.min.z, box.min.z );
53
54        modelBox.max.x = Math.max( modelBox.max.x, box.max.x );
55        modelBox.max.y = Math.max( modelBox.max.y, box.max.y );
56        modelBox.max.z = Math.max( modelBox.max.z, box.max.z );
57    }
58
59    /**
60     * Extracts bounding box of given object.
61     * @param {Object3D} object object for which bounding box is extracted
62     * @returns {Box3} bounding box of object
63     */
64    getBoundingBox(object) {
65        let box = new THREE.Box3();
66        box.setFromObject(object);
67        return box;
68    }
69
70    /**
71     * Calculates Camera position and rotation that should be used in order to see all meshes in scene.
72     * @param {Mesh[]} meshes list of meshes to be bound by camera.
73     * @returns {{target: {x: number, y: number, z: number}, position: {x: number, y: number, z: number}}} new position of Camera and target, to which Camera should point
74     */
75    calculateCameraSetting(meshes) {
76        if (meshes.length == 0) {
77            return this.config.defaultSettings;
78        }
79
80        let modelBox = new THREE.Box3();
81        for (let i = 0; i < meshes.length; i++) {
82            let mesh = meshes[i];
83            let box = this.getBoundingBox(mesh);
84            this.updateModelBox(modelBox, box);
85        }
86
87        let modelSphere = modelBox.getBoundingSphere();
88
89        return {
90            target: {
91                x: modelSphere.center.x,
92                y: modelSphere.center.y,
93                z: modelSphere.center.z
94            },
95            position: {
96                x: modelSphere.center.x + modelSphere.radius,
97                y: modelSphere.center.y + modelSphere.radius,
98                z: modelSphere.center.z + modelSphere.radius
99            }
100        };
101    }
102
103    /**
104     * Moves Camera to cover all selected meshes in canvas.
105     * @param {Mesh[]} meshes list of meshes to be seen
106     */
107    zoomAll(meshes) {
108        let settings = this.calculateCameraSetting(meshes);
109        this.cameraControl.target.set(settings.target.x, settings.target.y, settings.target.z);
110        this.perspectiveCamera.position.set(settings.position.x, settings.position.y, settings.position.z);
111        this.cameraControl.update();
112    }
113
114    /**
115     * Getter for THREE.js perspective camera logic.
116     * @returns {PerspectiveCamera} reference to Camera perspective camera
117     */
118    getPerspectiveCamera() {
119        return this.perspectiveCamera;
120    }
121
122    /**
123     * Getter for THREE.js orbit controls logic.
124     * @returns {OrbitControls} reference to Camera orbit controls
125     */
126    getCameraControl() {
127        return this.cameraControl;
128    }
129
130    /**
131     * Sets the camera autorotation property.
132     * @param {boolean} autoRotate true if camera should autorotate, false otherwise
133     */
134    setAutoRotate(autoRotate) {
135        this.autoRotate = autoRotate;
136        this.cameraControl.autoRotate = this.autoRotate;
137    }
138}
139
140export default Camera;
Note: See TracBrowser for help on using the repository browser.