@shapediver/viewer.rendering-engine.camera-engine 2.12.8 → 3.0.0

package/src/implementation/camera/OrthographicCamera.ts

@@ -1,43 +1,39 @@
+import { AbstractCamera } from './AbstractCamera';
+import { Box, IBox } from '@shapediver/viewer.shared.math';
+import { CAMERA_TYPE } from '../../interfaces/ICameraEngine';
+import { ICameraControls } from '../../interfaces/controls/ICameraControls';
+import { IOrthographicCamera, ORTHOGRAPHIC_CAMERA_DIRECTION } from '../../interfaces/camera/IOrthographicCamera';
+import { IOrthographicCameraSettings } from '@shapediver/viewer.settings';
+import { IRenderingEngine } from '@shapediver/viewer.rendering-engine.rendering-engine';
+import { ITree, Tree } from '@shapediver/viewer.shared.node-tree';
+import { mat4, vec2, vec3 } from 'gl-matrix';
+import { OrthographicCameraControls } from '../controls/OrthographicCameraControls';
 import {
   Converter,
   DomEventEngine,
   Logger,
   SettingsEngine,
   ShapeDiverViewerCameraError,
-  StateEngine,
-} from '@shapediver/viewer.shared.services'
-import { mat4, vec2, vec3 } from 'gl-matrix'
-import { Box, IBox } from '@shapediver/viewer.shared.math'
-import { IOrthographicCameraSettingsV3 } from '@shapediver/viewer.settings'
-import { IRenderingEngine } from '@shapediver/viewer.rendering-engine.rendering-engine'
-import { ITree, Tree } from '@shapediver/viewer.shared.node-tree'
-
-import { CAMERA_TYPE } from '../../interfaces/ICameraEngine'
-import { AbstractCamera } from './AbstractCamera'
-import { OrthographicCameraControls } from '../controls/OrthographicCameraControls'
-import { IOrthographicCamera, ORTHOGRAPHIC_CAMERA_DIRECTION } from '../../interfaces/camera/IOrthographicCamera'
-import { IOrthographicCameraControls } from '../../interfaces/controls/IOrthographicCameraControls'
+} from '@shapediver/viewer.shared.services';
 
 export class OrthographicCamera extends AbstractCamera implements IOrthographicCamera {
-  // #region Properties (7)
+  // #region Properties (11)
 
   readonly #converter: Converter = Converter.instance;
   readonly #logger: Logger = Logger.instance;
   readonly #tree: ITree = Tree.instance;
 
-  #domEventListenerToken?: string;
-  #domEventEngine?: DomEventEngine;
-
   #bottom: number = -100;
-  #direction: ORTHOGRAPHIC_CAMERA_DIRECTION = ORTHOGRAPHIC_CAMERA_DIRECTION.TOP;
+  #direction: ORTHOGRAPHIC_CAMERA_DIRECTION = ORTHOGRAPHIC_CAMERA_DIRECTION.CUSTOM;
+  #domEventEngine?: DomEventEngine;
   #left: number = -100;
   #right: number = 100;
   #top: number = 100;
-  #threeJsObject: { [key: string]: THREE.OrthographicCamera } = {};
-  #up: vec3 = vec3.fromValues(0, 1, 0);
-  protected _controls: IOrthographicCameraControls;
+  #up: vec3 = vec3.fromValues(0, 0, 1);
 
-  // #endregion Properties (7)
+  protected _controls: ICameraControls;
+
+  // #endregion Properties (11)
 
   // #region Constructors (1)
 
@@ -48,7 +44,7 @@ export class OrthographicCamera extends AbstractCamera implements IOrthographicC
 
   // #endregion Constructors (1)
 
-  // #region Public Accessors (12)
+  // #region Public Getters And Setters (14)
 
   public get bottom(): number {
     return this.#bottom;
@@ -58,11 +54,11 @@ export class OrthographicCamera extends AbstractCamera implements IOrthographicC
     this.#bottom = value;
   }
 
-  public get controls(): IOrthographicCameraControls {
+  public get controls(): ICameraControls {
     return this._controls;
   }
 
-  public set controls(value: IOrthographicCameraControls) {
+  public set controls(value: ICameraControls) {
     this._controls = value;
   }
 
@@ -80,26 +76,22 @@ export class OrthographicCamera extends AbstractCamera implements IOrthographicC
         this.up = vec3.fromValues(0, 1, 0);
         break;
       case ORTHOGRAPHIC_CAMERA_DIRECTION.RIGHT:
-        this.up = vec3.fromValues(0, 0, 1);
-        break;
-      case ORTHOGRAPHIC_CAMERA_DIRECTION.LEFT:
+        case ORTHOGRAPHIC_CAMERA_DIRECTION.LEFT:
         this.up = vec3.fromValues(0, 0, 1);
         break;
       case ORTHOGRAPHIC_CAMERA_DIRECTION.BACK:
-        this.up = vec3.fromValues(0, 0, 1);
-        break;
-      case ORTHOGRAPHIC_CAMERA_DIRECTION.FRONT:
+        case ORTHOGRAPHIC_CAMERA_DIRECTION.FRONT:
         this.up = vec3.fromValues(0, 0, 1);
         break;
       default:
-        this.up = vec3.fromValues(0, -1, 0);
+        this.up = vec3.fromValues(0, 0, 1);
     }
 
     if (changedDirection) {
       const { position, target } = this.calculateZoomTo(undefined);
       this.defaultPosition = vec3.clone(position);
       this.defaultTarget = vec3.clone(target);
-      
+
       this.position = vec3.clone(position);
       this.target = vec3.clone(target);
     }
@@ -137,16 +129,12 @@ export class OrthographicCamera extends AbstractCamera implements IOrthographicC
     this.#up = value;
   }
 
-  public get threeJsObject(): { [key: string]: THREE.OrthographicCamera } {
-    return this.#threeJsObject;
-  }
-
-  // #endregion Public Accessors (12)
+  // #endregion Public Getters And Setters (14)
 
   // #region Public Methods (6)
 
   public applySettings(settingsEngine: SettingsEngine) {
-    const cameraSetting = <IOrthographicCameraSettingsV3>settingsEngine.camera.cameras[this.id];
+    const cameraSetting = <IOrthographicCameraSettings>settingsEngine.camera.cameras[this.id];
     if (cameraSetting) {
       this.name = cameraSetting.name;
       this.autoAdjust = cameraSetting.autoAdjust;
@@ -154,10 +142,11 @@ export class OrthographicCamera extends AbstractCamera implements IOrthographicC
       this.enableCameraControls = cameraSetting.enableCameraControls;
       this.revertAtMouseUp = cameraSetting.revertAtMouseUp;
       this.revertAtMouseUpDuration = cameraSetting.revertAtMouseUpDuration;
+      this.sceneRotation = vec2.fromValues(cameraSetting.sceneRotation.x, cameraSetting.sceneRotation.y);
       this.zoomExtentsFactor = cameraSetting.zoomExtentsFactor;
 
-      let position = this.#converter.toVec3(cameraSetting.position);
-      let target = this.#converter.toVec3(cameraSetting.target);
+      const position = this.#converter.toVec3(cameraSetting.position);
+      const target = this.#converter.toVec3(cameraSetting.target);
       this.defaultPosition = vec3.clone(position);
       this.defaultTarget = vec3.clone(target);
 
@@ -167,40 +156,36 @@ export class OrthographicCamera extends AbstractCamera implements IOrthographicC
 
     if (this.position[0] === this.target[0] && this.position[1] === this.target[1] && this.position[2] === this.target[2]) {
       if (this._viewportId) {
-        this._stateEngine.renderingEngines[this._viewportId].boundingBoxCreated
+        this._stateEngine.viewportEngines[this._viewportId].boundingBoxCreated
           .then(async () => {
             await this.zoomTo(undefined, { duration: 0 });
             this.defaultPosition = vec3.clone(this._controls.position);
             this.defaultTarget = vec3.clone(this._controls.target);
-          })
+          });
       }
     }
     (<OrthographicCameraControls>this._controls).applySettings(settingsEngine);
   }
 
   public assignViewer(renderingEngine: IRenderingEngine): void {
-    if(renderingEngine.closed) 
+    if (renderingEngine.closed)
       throw new ShapeDiverViewerCameraError(`OrthographicCamera(${this.id}).assignViewer: Viewer with id ${renderingEngine.id} not found.`);
-      
+
     this.assignViewerInternal(renderingEngine.id, renderingEngine.canvas);
     this._controls.assignViewer(renderingEngine.id, renderingEngine.canvas);
 
-    if (this.#domEventListenerToken && this.#domEventEngine)
-      this.#domEventEngine.removeDomEventListener(this.#domEventListenerToken);
+    if (this.domEventListenerToken && this.#domEventEngine)
+      this.#domEventEngine.removeDomEventListener(this.domEventListenerToken);
 
     this.#domEventEngine = renderingEngine.domEventEngine;
-    this.#domEventListenerToken = this.#domEventEngine.addDomEventListener((<OrthographicCameraControls>this._controls).cameraControlsEventDistribution);
+    this.domEventListenerToken = this.#domEventEngine.addDomEventListener((<OrthographicCameraControls>this._controls).cameraControlsEventDistribution);
 
     this.boundingBox = this.#tree.root.boundingBox.clone();
-      
-    this._stateEngine.renderingEngines[renderingEngine.id].boundingBoxCreated.then(async () => {
+
+    this._stateEngine.viewportEngines[renderingEngine.id].boundingBoxCreated.then(async () => {
       if (this.position[0] === this.target[0] && this.position[1] === this.target[1] && this.position[2] === this.target[2])
         await this.zoomTo(undefined, { duration: 0 });
-    })
-  }
-
-  public clone(): IOrthographicCamera {
-    return new OrthographicCamera(this.id, this.version);
+    });
   }
 
   public calculateZoomTo(zoomTarget?: Box, startingPosition: vec3 = this.position, startingTarget: vec3 = this.target): { position: vec3; target: vec3; } {
@@ -214,64 +199,78 @@ export class OrthographicCamera extends AbstractCamera implements IOrthographicC
       // specified Box
       box = zoomTarget.clone();
     }
-    
-    if (box.isEmpty()) return { position: vec3.create(), target: vec3.create() }
 
+    if (box.isEmpty()) return { position: vec3.create(), target: vec3.create() };
+
+    const target = vec3.fromValues((box.max[0] + box.min[0]) / 2, (box.max[1] + box.min[1]) / 2, (box.max[2] + box.min[2]) / 2);
+    if (startingPosition[0] === startingTarget[0] && startingPosition[1] === startingTarget[1] && startingPosition[2] === startingTarget[2])
+      startingPosition = vec3.fromValues(target[0], target[1] - 7.5, target[2] + 5);
+      
     const factor = 2 * box.boundingSphere.radius * this.zoomExtentsFactor;
-    const center = vec3.clone(box.boundingSphere.center);
 
     switch (this.#direction) {
       case ORTHOGRAPHIC_CAMERA_DIRECTION.TOP:
         return {
-          position: vec3.fromValues(center[0], center[1], center[2] + factor),
-          target: vec3.clone(center)
-        }
+          position: vec3.fromValues(target[0], target[1], target[2] + factor),
+          target: vec3.clone(target)
+        };
       case ORTHOGRAPHIC_CAMERA_DIRECTION.BOTTOM:
         return {
-          position: vec3.fromValues(center[0], center[1], center[2] - factor),
-          target: vec3.clone(center)
-        }
+          position: vec3.fromValues(target[0], target[1], target[2] - factor),
+          target: vec3.clone(target)
+        };
       case ORTHOGRAPHIC_CAMERA_DIRECTION.RIGHT:
         return {
-          position: vec3.fromValues(center[0] + factor, center[1], center[2]),
-          target: vec3.clone(center)
-        }
+          position: vec3.fromValues(target[0] + factor, target[1], target[2]),
+          target: vec3.clone(target)
+        };
       case ORTHOGRAPHIC_CAMERA_DIRECTION.LEFT:
         return {
-          position: vec3.fromValues(center[0] - factor, center[1], center[2]),
-          target: vec3.clone(center)
-        }
+          position: vec3.fromValues(target[0] - factor, target[1], target[2]),
+          target: vec3.clone(target)
+        };
       case ORTHOGRAPHIC_CAMERA_DIRECTION.BACK:
         return {
-          position: vec3.fromValues(center[0], center[1] + factor, center[2]),
-          target: vec3.clone(center)
-        }
+          position: vec3.fromValues(target[0], target[1] + factor, target[2]),
+          target: vec3.clone(target)
+        };
       case ORTHOGRAPHIC_CAMERA_DIRECTION.FRONT:
         return {
-          position: vec3.fromValues(center[0], center[1] - factor, center[2]),
-          target: vec3.clone(center)
-        }
+          position: vec3.fromValues(target[0], target[1] - factor, target[2]),
+          target: vec3.clone(target)
+        };
       default:
-        return {
-          position: vec3.fromValues(center[0], center[1], center[2] + factor),
-          target: vec3.clone(center)
+        {
+          // get the direction from the starting position to the starting target
+          const direction = vec3.subtract(vec3.create(), startingPosition, target);
+          // normalize the direction
+          vec3.normalize(direction, direction);
+          // get the new position
+          return {
+            position: vec3.add(vec3.create(), target, vec3.scale(vec3.create(), direction, factor)),
+            target: vec3.clone(target)
+          };
         }
     }
   }
 
+  public clone(): IOrthographicCamera {
+    return new OrthographicCamera(this.id, this.version);
+  }
+
   public project(pos: vec3): vec2 {
     const m = mat4.targetTo(mat4.create(), this.position, this.target, this.up);
     const p = mat4.ortho(mat4.create(), this.left, this.right, this.bottom, this.top, this.near, this.far);
-    vec3.transformMat4(pos, pos, mat4.invert(m, m))
-    vec3.transformMat4(pos, pos, p)
-    return vec2.fromValues(pos[0], pos[1])
+    vec3.transformMat4(pos, pos, mat4.invert(m, m));
+    vec3.transformMat4(pos, pos, p);
+    return vec2.fromValues(pos[0], pos[1]);
   }
 
-  public unproject(pos: vec3, position = this.position, target = this.target): vec3 {
+  public unproject(pos: vec3): vec3 {
     const m = mat4.targetTo(mat4.create(), this.position, this.target, this.up);
     const p = mat4.ortho(mat4.create(), this.left, this.right, this.bottom, this.top, this.near, this.far);
-    vec3.transformMat4(pos, pos, mat4.invert(p, p))
-    vec3.transformMat4(pos, pos, m)
+    vec3.transformMat4(pos, pos, mat4.invert(p, p));
+    vec3.transformMat4(pos, pos, m);
     return vec3.clone(pos);
   }
 

package/src/implementation/camera/PerspectiveCamera.ts

@@ -1,40 +1,38 @@
+import { AbstractCamera } from './AbstractCamera';
+import { Box, IBox, Plane } from '@shapediver/viewer.shared.math';
+import { CAMERA_TYPE } from '../../interfaces/ICameraEngine';
+import { ICameraControls } from '../../interfaces/controls/ICameraControls';
+import { IPerspectiveCamera } from '../../interfaces/camera/IPerspectiveCamera';
+import { IPerspectiveCameraSettings } from '@shapediver/viewer.settings';
+import { IRenderingEngine } from '@shapediver/viewer.rendering-engine.rendering-engine';
+import { ITree, Tree } from '@shapediver/viewer.shared.node-tree';
+import {
+  mat4,
+  quat,
+  vec2,
+  vec3
+} from 'gl-matrix';
+import { PerspectiveCameraControls } from '../controls/PerspectiveCameraControls';
 import {
   Converter,
   DomEventEngine,
-  Logger,
   SettingsEngine,
   ShapeDiverViewerCameraError,
-  StateEngine,
-} from '@shapediver/viewer.shared.services'
-import { mat4, quat, vec2, vec3 } from 'gl-matrix'
-import { Box, IBox, Plane } from '@shapediver/viewer.shared.math'
-import { IPerspectiveCameraSettingsV3 } from '@shapediver/viewer.settings'
-import { IRenderingEngine } from '@shapediver/viewer.rendering-engine.rendering-engine'
-import { ITree, Tree } from '@shapediver/viewer.shared.node-tree'
-
-import { CAMERA_TYPE } from '../../interfaces/ICameraEngine'
-import { AbstractCamera } from './AbstractCamera'
-import { PerspectiveCameraControls } from '../controls/PerspectiveCameraControls'
-import { IPerspectiveCamera } from '../../interfaces/camera/IPerspectiveCamera'
-import { IPerspectiveCameraControls } from '../../interfaces/controls/IPerspectiveCameraControls'
+} from '@shapediver/viewer.shared.services';
 
 export class PerspectiveCamera extends AbstractCamera implements IPerspectiveCamera {
-  // #region Properties (3)
+  // #region Properties (6)
 
   readonly #converter: Converter = Converter.instance;
-  readonly #logger: Logger = Logger.instance;
   readonly #tree: ITree = Tree.instance;
 
-  protected _controls: IPerspectiveCameraControls;
-
-  #domEventListenerToken?: string;
-  #domEventEngine?: DomEventEngine;
-
   #aspect: number | undefined;
+  #domEventEngine?: DomEventEngine;
   #fov: number = 60;
-  #threeJsObject: { [key: string]: THREE.PerspectiveCamera } = {};
 
-  // #endregion Properties (3)
+  protected _controls: ICameraControls;
+
+  // #endregion Properties (6)
 
   // #region Constructors (1)
 
@@ -46,7 +44,7 @@ export class PerspectiveCamera extends AbstractCamera implements IPerspectiveCam
 
   // #endregion Constructors (1)
 
-  // #region Public Accessors (4)
+  // #region Public Getters And Setters (6)
 
   public get aspect(): number | undefined {
     return this.#aspect;
@@ -56,11 +54,11 @@ export class PerspectiveCamera extends AbstractCamera implements IPerspectiveCam
     this.#aspect = value;
   }
 
-  public get controls(): IPerspectiveCameraControls {
+  public get controls(): ICameraControls {
     return this._controls;
   }
 
-  public set controls(value: IPerspectiveCameraControls) {
+  public set controls(value: ICameraControls) {
     this._controls = value;
   }
 
@@ -72,16 +70,12 @@ export class PerspectiveCamera extends AbstractCamera implements IPerspectiveCam
     this.#fov = value;
   }
 
-  public get threeJsObject(): { [key: string]: THREE.PerspectiveCamera } {
-    return this.#threeJsObject;
-  }
-
-  // #endregion Public Accessors (4)
+  // #endregion Public Getters And Setters (6)
 
   // #region Public Methods (6)
 
   public applySettings(settingsEngine: SettingsEngine) {
-    const cameraSetting = <IPerspectiveCameraSettingsV3>settingsEngine.camera.cameras[this.id];
+    const cameraSetting = <IPerspectiveCameraSettings>settingsEngine.camera.cameras[this.id];
     if (cameraSetting) {
       this.name = cameraSetting.name;
       this.autoAdjust = cameraSetting.autoAdjust;
@@ -89,10 +83,11 @@ export class PerspectiveCamera extends AbstractCamera implements IPerspectiveCam
       this.enableCameraControls = cameraSetting.enableCameraControls;
       this.revertAtMouseUp = cameraSetting.revertAtMouseUp;
       this.revertAtMouseUpDuration = cameraSetting.revertAtMouseUpDuration;
+      this.sceneRotation = vec2.fromValues(cameraSetting.sceneRotation.x, cameraSetting.sceneRotation.y);
       this.zoomExtentsFactor = cameraSetting.zoomExtentsFactor;
 
-      let position = this.#converter.toVec3(cameraSetting.position);
-      let target = this.#converter.toVec3(cameraSetting.target);
+      const position = this.#converter.toVec3(cameraSetting.position);
+      const target = this.#converter.toVec3(cameraSetting.target);
       this.defaultPosition = vec3.clone(position);
       this.defaultTarget = vec3.clone(target);
 
@@ -102,40 +97,36 @@ export class PerspectiveCamera extends AbstractCamera implements IPerspectiveCam
     }
 
     if (this.position[0] === this.target[0] && this.position[1] === this.target[1] && this.position[2] === this.target[2]) {
-      if(this._viewportId) {
-        this._stateEngine.renderingEngines[this._viewportId].boundingBoxCreated.then(async () => {
+      if (this._viewportId) {
+        this._stateEngine.viewportEngines[this._viewportId].boundingBoxCreated.then(async () => {
           await this.zoomTo(undefined, { duration: 0 });
           this.defaultPosition = vec3.clone(this._controls.position);
           this.defaultTarget = vec3.clone(this._controls.target);
-        })      
+        });
       }
     }
     (<PerspectiveCameraControls>this._controls).applySettings(settingsEngine);
   }
 
   public assignViewer(renderingEngine: IRenderingEngine): void {
-    if(renderingEngine.closed) 
+    if (renderingEngine.closed)
       throw new ShapeDiverViewerCameraError(`OrthographicCamera(${this.id}).assignViewer: Viewer with id ${renderingEngine.id} not found.`);
 
     this.assignViewerInternal(renderingEngine.id, renderingEngine.canvas);
     this._controls.assignViewer(renderingEngine.id, renderingEngine.canvas);
 
-    if (this.#domEventListenerToken && this.#domEventEngine)
-      this.#domEventEngine.removeDomEventListener(this.#domEventListenerToken);
+    if (this.domEventListenerToken && this.#domEventEngine)
+      this.#domEventEngine.removeDomEventListener(this.domEventListenerToken);
 
     this.#domEventEngine = renderingEngine.domEventEngine;
-    this.#domEventListenerToken = this.#domEventEngine.addDomEventListener((<PerspectiveCameraControls>this._controls).cameraControlsEventDistribution);
+    this.domEventListenerToken = this.#domEventEngine.addDomEventListener((<PerspectiveCameraControls>this._controls).cameraControlsEventDistribution);
 
     this.boundingBox = this.#tree.root.boundingBox.clone();
 
-    this._stateEngine.renderingEngines[renderingEngine.id].boundingBoxCreated.then(async () => {
+    this._stateEngine.viewportEngines[renderingEngine.id].boundingBoxCreated.then(async () => {
       if (this.position[0] === this.target[0] && this.position[1] === this.target[1] && this.position[2] === this.target[2])
         await this.zoomTo(undefined, { duration: 0 });
-    })
-  }
-
-  public clone(): IPerspectiveCamera {
-    return new PerspectiveCamera(this.id, this.version, this.aspect);
+    });
   }
 
   public calculateZoomTo(zoomTarget?: Box, startingPosition: vec3 = this.position, startingTarget: vec3 = this.target): { position: vec3, target: vec3 } {
@@ -150,28 +141,28 @@ export class PerspectiveCamera extends AbstractCamera implements IPerspectiveCam
       box = zoomTarget.clone();
     }
 
-    if (box.isEmpty()) return { position: vec3.create(), target: vec3.create() }
+    if (box.isEmpty()) return { position: vec3.create(), target: vec3.create() };
 
     const samePosition = startingPosition[0] === startingTarget[0] && startingPosition[1] === startingTarget[1] && startingPosition[2] === startingTarget[2];
-    let target = vec3.fromValues((box.max[0] + box.min[0]) / 2, (box.max[1] + box.min[1]) / 2, (box.max[2] + box.min[2]) / 2);
+    const target = vec3.fromValues((box.max[0] + box.min[0]) / 2, (box.max[1] + box.min[1]) / 2, (box.max[2] + box.min[2]) / 2);
 
     // if the camera position and the target are the same, we set a corner position
     if (startingPosition[0] === startingTarget[0] && startingPosition[1] === startingTarget[1] && startingPosition[2] === startingTarget[2])
       startingPosition = vec3.fromValues(target[0], target[1] - 7.5, target[2] + 5);
 
     // extend box by the factor
-    const boxDir = vec3.subtract(vec3.create(), box.max, target)
+    const boxDir = vec3.subtract(vec3.create(), box.max, target);
     vec3.multiply(boxDir, boxDir, samePosition ? vec3.fromValues(2, 2, 2) : vec3.fromValues(this.zoomExtentsFactor, this.zoomExtentsFactor, this.zoomExtentsFactor));
-    box = new Box(vec3.subtract(vec3.create(), target, boxDir), vec3.add(vec3.create(), target, boxDir))
+    box = new Box(vec3.subtract(vec3.create(), target, boxDir), vec3.add(vec3.create(), target, boxDir));
 
     const direction = vec3.normalize(vec3.create(), vec3.subtract(vec3.create(), target, startingPosition));
 
-    let cross = vec3.normalize(vec3.create(), vec3.cross(vec3.create(), vec3.fromValues(0, 0, 1), direction));
-    let up = vec3.normalize(vec3.create(), vec3.cross(vec3.create(), cross, direction));
+    const cross = vec3.normalize(vec3.create(), vec3.cross(vec3.create(), vec3.fromValues(0, 0, 1), direction));
+    const up = vec3.normalize(vec3.create(), vec3.cross(vec3.create(), cross, direction));
 
     let position = vec3.add(vec3.create(), target, vec3.multiply(vec3.create(), direction, vec3.fromValues(-0.00000001, -0.00000001, -0.00000001)));
 
-    let points = [];
+    const points = [];
     points.push(vec3.fromValues(box.min[0], box.min[1], box.min[2]));
     points.push(vec3.fromValues(box.min[0], box.min[1], box.max[2]));
     points.push(vec3.fromValues(box.min[0], box.max[1], box.min[2]));
@@ -181,18 +172,18 @@ export class PerspectiveCamera extends AbstractCamera implements IPerspectiveCam
     points.push(vec3.fromValues(box.max[0], box.max[1], box.min[2]));
     points.push(vec3.fromValues(box.max[0], box.max[1], box.max[2]));
 
-    let fovDown = vec3.normalize(vec3.create(), vec3.transformQuat(vec3.create(), direction, quat.setAxisAngle(quat.create(), cross, (this.fov / 2) * (Math.PI / 180))));
-    let fovUp = vec3.normalize(vec3.create(), vec3.transformQuat(vec3.create(), direction, quat.setAxisAngle(quat.create(), cross, -(this.fov / 2) * (Math.PI / 180))));
+    const fovDown = vec3.normalize(vec3.create(), vec3.transformQuat(vec3.create(), direction, quat.setAxisAngle(quat.create(), cross, (this.fov / 2) * (Math.PI / 180))));
+    const fovUp = vec3.normalize(vec3.create(), vec3.transformQuat(vec3.create(), direction, quat.setAxisAngle(quat.create(), cross, -(this.fov / 2) * (Math.PI / 180))));
 
     const aspect = samePosition ? 1.5 : this.aspect || 1.5;
-    let hFoV = 2 * Math.atan(Math.tan(this.fov * Math.PI / 180 / 2) * aspect);
-    let fovRight = vec3.normalize(vec3.create(), vec3.transformQuat(vec3.create(), direction, quat.setAxisAngle(quat.create(), up, hFoV / 2)));
-    let fovLeft = vec3.normalize(vec3.create(), vec3.transformQuat(vec3.create(), direction, quat.setAxisAngle(quat.create(), up, -hFoV / 2)));
+    const hFoV = 2 * Math.atan(Math.tan(this.fov * Math.PI / 180 / 2) * aspect);
+    const fovRight = vec3.normalize(vec3.create(), vec3.transformQuat(vec3.create(), direction, quat.setAxisAngle(quat.create(), up, hFoV / 2)));
+    const fovLeft = vec3.normalize(vec3.create(), vec3.transformQuat(vec3.create(), direction, quat.setAxisAngle(quat.create(), up, -hFoV / 2)));
 
-    let planeCross = new Plane(vec3.clone(cross), 0);
+    const planeCross = new Plane(vec3.clone(cross), 0);
     planeCross.setFromNormalAndCoplanarPoint(vec3.clone(cross), vec3.clone(target));
 
-    let planeUp = new Plane(vec3.fromValues(0, 0, 1), 0);
+    const planeUp = new Plane(vec3.fromValues(0, 0, 1), 0);
     planeUp.setFromNormalAndCoplanarPoint(vec3.clone(up), vec3.clone(target));
 
     let distanceCamera = 0.0;
@@ -202,7 +193,7 @@ export class PerspectiveCamera extends AbstractCamera implements IPerspectiveCam
 
       if (vec3.dot(direction, fovDown) > vec3.dot(direction, toP)) {
         const currentDir = vec3.multiply(vec3.create(), vec3.dot(fovDown, toP) > vec3.dot(fovUp, toP) ? fovDown : fovUp, vec3.fromValues(-1, -1, -1));
-        const distance = planeUp.intersect(projected, currentDir)
+        const distance = planeUp.intersect(projected, currentDir);
         if (distance) {
           const cameraPoint = vec3.add(vec3.create(), vec3.multiply(vec3.create(), currentDir, vec3.fromValues(distance, distance, distance)), projected);
           distanceCamera = Math.max(distanceCamera, vec3.distance(target, cameraPoint));
@@ -214,7 +205,7 @@ export class PerspectiveCamera extends AbstractCamera implements IPerspectiveCam
 
       if (vec3.dot(direction, fovRight) > vec3.dot(direction, toP)) {
         const currentDir = vec3.multiply(vec3.create(), vec3.dot(fovRight, toP) > vec3.dot(fovLeft, toP) ? fovRight : fovLeft, vec3.fromValues(-1, -1, -1));
-        const distance = planeCross.intersect(projected, currentDir)
+        const distance = planeCross.intersect(projected, currentDir);
         if (distance) {
           const cameraPoint = vec3.add(vec3.create(), vec3.multiply(vec3.create(), currentDir, vec3.fromValues(distance, distance, distance)), projected);
           distanceCamera = Math.max(distanceCamera, vec3.distance(target, cameraPoint));
@@ -226,24 +217,28 @@ export class PerspectiveCamera extends AbstractCamera implements IPerspectiveCam
 
     return {
       position, target
-    }
+    };
+  }
+
+  public clone(): IPerspectiveCamera {
+    return new PerspectiveCamera(this.id, this.version, this.aspect);
   }
 
   public project(pos: vec3, position = this.position, target = this.target): vec2 {
     const m = mat4.targetTo(mat4.create(), position, target, vec3.fromValues(0, 0, 1));
     const aspect = this.aspect || 1.5;
     const p = mat4.perspective(mat4.create(), this.fov / (180 / Math.PI), aspect, this.near, this.far);
-    vec3.transformMat4(pos, pos, mat4.invert(m, m))
-    vec3.transformMat4(pos, pos, p)
-    return vec2.fromValues(pos[0], pos[1])
+    vec3.transformMat4(pos, pos, mat4.invert(m, m));
+    vec3.transformMat4(pos, pos, p);
+    return vec2.fromValues(pos[0], pos[1]);
   }
 
   public unproject(pos: vec3, position = this.position, target = this.target): vec3 {
     const m = mat4.targetTo(mat4.create(), position, target, vec3.fromValues(0, 0, 1));
     const aspect = this.aspect || 1.5;
     const p = mat4.perspective(mat4.create(), this.fov / (180 / Math.PI), aspect, this.near, this.far);
-    vec3.transformMat4(pos, pos, mat4.invert(p, p))
-    vec3.transformMat4(pos, pos, m)
+    vec3.transformMat4(pos, pos, mat4.invert(p, p));
+    vec3.transformMat4(pos, pos, m);
     return vec3.clone(pos);
   }