orthographic camera support

modules/scene/controls/TrackballControls.js

@@ -1,4 +1,7 @@
+
 /**
+ * Added support of orthographic camera to original implementation
+ * 
  * @author Eberhard Graether / http://egraether.com/
  * @author Mark Lundin 	/ http://mark-lundin.com
  * @author Simone Manini / http://daron1337.github.io
@@ -39,6 +42,9 @@ THREE.TrackballControls = function ( object, domElement ) {
 
   this.target = new THREE.Vector3();
 
+  this.projectionChanged = false;
+  this.projectionZoomSpeed = 0.5;
+
   var EPS = 0.000001;
 
   var lastPosition = new THREE.Vector3();
@@ -201,6 +207,11 @@ THREE.TrackballControls = function ( object, domElement ) {
   }() );
 
 
+  this.setCameraMode = function(isOrthographic) {
+    this.noZoom = isOrthographic;
+    this.projectionZoom = isOrthographic;
+  };
+  
   this.zoomCamera = function () {
 
     var factor;
@@ -321,8 +332,10 @@ THREE.TrackballControls = function ( object, domElement ) {
 
     _this.object.lookAt( _this.target );
 
-    if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) {
+    if ( lastPosition.distanceToSquared( _this.object.position ) > EPS || this.projectionChanged) {
 
+      this.projectionChanged = false;
+      
       _this.dispatchEvent( changeEvent );
 
       lastPosition.copy( _this.object.position );
@@ -473,28 +486,52 @@ THREE.TrackballControls = function ( object, domElement ) {
     event.preventDefault();
     event.stopPropagation();
 
-    switch ( event.deltaMode ) {
+    if (_this.projectionZoom) {
+      let speed = _this.projectionZoomSpeed;
+      switch ( event.deltaMode ) {
 
-      case 2:
-        // Zoom in pages
-        _zoomStart.y -= event.deltaY * 0.025;
-        break;
+        case 2:
+          // Zoom in pages
+          speed *= 10;
+          break;
+        case 1:
+          // Zoom in lines
+          speed *= 3;
+          break;
+      }
+      let step = Math.pow( 0.95, speed);
+      if (event.deltaY < 0) {
+        step = 1 / step;
+      } 
+      _this.object.zoom *= step;
+      _this.object.updateProjectionMatrix();
+      _this.projectionChanged = true;
 
-      case 1:
-        // Zoom in lines
-        _zoomStart.y -= event.deltaY * 0.01;
-        break;
+    } else {
 
-      default:
-        // undefined, 0, assume pixels
-        _zoomStart.y -= event.deltaY * 0.00025;
-        break;
+      switch ( event.deltaMode ) {
 
+        case 2:
+          // Zoom in pages
+          _zoomStart.y -= event.deltaY * 0.025;
+          break;
+
+        case 1:
+          // Zoom in lines
+          _zoomStart.y -= event.deltaY * 0.01;
+          break;
+
+        default:
+          // undefined, 0, assume pixels
+          _zoomStart.y -= event.deltaY * 0.00025;
+          break;
+
+      }
+
+      _this.dispatchEvent( startEvent );
+      _this.dispatchEvent( endEvent );
     }
 
-    _this.dispatchEvent( startEvent );
-    _this.dispatchEvent( endEvent );
-
   }
 
   function touchstart( event ) {

modules/scene/sceneSetup.js

@@ -1,6 +1,7 @@
 import DPR from 'dpr';
+import './utils/threeLoader'
 
-export default class SceneSetUp{
+export default class SceneSetUp {
   
   constructor(container) {
     
@@ -17,13 +18,29 @@ export default class SceneSetUp{
   aspect() {
     return this.container.clientWidth / this.container.clientHeight;
   }
+  
+  createOrthographicCamera() {
+    let width = this.container.clientWidth;
+    let height = this.container.clientHeight;
+    this.oCamera = new THREE.OrthographicCamera( width / - 1, width / 1, height / 1, height / - 1, 0.1, 10000);
+    this.oCamera.position.z = 1000;
+    this.oCamera.position.x = -1000;
+    this.oCamera.position.y = 300;
+  }
+
+  createPerspectiveCamera() {
+    this.pCamera = new THREE.PerspectiveCamera( 500*75, this.aspect(), 0.1, 10000 );
+    this.pCamera.position.z = 1000;
+    this.pCamera.position.x = -1000;
+    this.pCamera.position.y = 300;
+  }
 
   setUpCamerasAndLights() {
-    this.camera = new THREE.PerspectiveCamera( 500*75, this.aspect(), 0.1, 10000 );
-    this.camera.position.z = 1000;
-    this.camera.position.x = -1000;
-    this.camera.position.y = 300;
+    this.createOrthographicCamera();
+    this.createPerspectiveCamera();
 
+    this.camera = this.pCamera;
+    
     this.light = new THREE.PointLight( 0xffffff);
     this.light.position.set( 10, 10, 10 );
     this.scene.add(this.light);
@@ -31,17 +48,39 @@ export default class SceneSetUp{
     this.renderer = new THREE.WebGLRenderer();
     this.renderer.setPixelRatio(DPR);
     this.renderer.setClearColor(0x808080, 1);
-    this.renderer.setSize( this.container.clientWidth, this.container.clientHeight );
+    this.renderer.setSize( this.container.clientWidth,  this.container.clientHeight );
     this.container.appendChild( this.renderer.domElement );
 
     window.addEventListener( 'resize', () => {
-      this.camera.aspect = this.aspect();
-      this.camera.updateProjectionMatrix();
+      this.pCamera.aspect = this.aspect();
+      this.pCamera.updateProjectionMatrix();
       this.renderer.setSize( this.container.clientWidth, this.container.clientHeight );
       this.render();
     }, false );
   }
 
+  setCamera(camera) {
+    let camPosition = new THREE.Vector3();
+    let camRotation = new THREE.Euler();
+    let tempMatrix = new THREE.Matrix4();
+
+    camPosition.setFromMatrixPosition( this.camera.matrixWorld );
+    camRotation.setFromRotationMatrix( tempMatrix.extractRotation( this.camera.matrixWorld ) );
+    let camDistance = camera.position.length();
+
+    camera.up.copy(this.camera.up);
+    camera.position.copy(camPosition);
+    camera.quaternion.copy(camPosition);
+    this.trackballControls.setCameraMode(camera.isOrthographicCamera);
+    camera.position.normalize();
+    camera.position.multiplyScalar(camDistance);
+    
+    this.camera = camera;
+    this.trackballControls.object = camera;
+    this.transformControls.camera = camera;
+    this.updateControlsAndHelpers();
+  }
+
   setUpControls() {
     //  controls = new THREE.OrbitControls( camera , renderer.domElement);
     let trackballControls = new THREE.TrackballControls(this.camera , this.renderer.domElement);

modules/scene/utils/threeLoader.js

@@ -0,0 +1,6 @@
+import * as THREE from 'three';
+window.THREE = THREE;
+require('scene/controls/TrackballControls');
+require('three/examples/js/controls/OrbitControls');
+require('three/examples/js/controls/TransformControls');
+

web/app/3d/actions/core-actions.js

@@ -38,6 +38,16 @@ export const DeselectAll = {
   invoke: (app) => app.viewer.selectionMgr.deselectAll()
 };
 
+export const ToggleCameraMode = {
+  cssIcons: ['video-camera'],
+  label: 'toggle camera',
+  info: 'switch camera mode between perspective and orthographic',
+  invoke: (app) => {
+    app.context.services.viewer.toggleCamera();
+    app.context.services.viewer.render();
+  }
+};
+
 export const Info = {
   cssIcons: ['info-circle'],
   label: 'info',

web/app/3d/modeler-app.js

@@ -1,5 +1,4 @@
 import '../../../modules/scene/utils/vectorThreeEnhancement'
-import '../utils/three-loader'
 import Bus from 'bus'
 import {Viewer} from './scene/viewer'
 import {UI} from './ui/ctrl'

web/app/3d/scene/cadScene.js

@@ -50,6 +50,7 @@ export default class CadScene {
     SceneGraph.addToGroup(this.basisGroup, xAxis);
     SceneGraph.addToGroup(this.basisGroup, yAxis);
     SceneGraph.addToGroup(this.workGroup, this.basisGroup, yAxis);
+    this.hideBasis();
   }
 
   updateBasis(basis, depth) {

web/app/3d/scene/scenePlugin.js

@@ -4,11 +4,10 @@ import CadScene from "./cadScene";
 export function activate(context) {
   let {dom} = context.services;
   
-  let viewer = new Viewer(dom.viewerContainer);
+  let viewer = new Viewer(context.bus, dom.viewerContainer);
   
   context.services.viewer = viewer;
   context.services.cadScene = new CadScene(viewer.sceneSetup.rootGroup);
 
   context.bus.subscribe('scene:update', () => viewer.render());
 }
-

web/app/3d/scene/viewer.js

@@ -2,7 +2,8 @@ import SceneSetup from 'scene/sceneSetup';
 
 export default class Viewer {
   
-  constructor(container) {
+  constructor(bus, container) {
+    this.bus = bus;
     this.sceneSetup = new SceneSetup(container);
   }
   
@@ -18,9 +19,30 @@ export default class Viewer {
     return this.sceneSetup.raycast(event, group);
   }
   
-  setCameraMode() {
-    
+  setCameraMode(mode) {
+    if (mode === CAMERA_MODE.PERSPECTIVE) {
+      
+      this.sceneSetup.setCamera(this.sceneSetup.pCamera);
+    } else {
+      this.sceneSetup.setCamera(this.sceneSetup.oCamera);
+    }
+    this.bus.dispatch('scene_cameraMode', this.getCameraMode());
+  }
+
+  getCameraMode() {
+    return this.sceneSetup.camera === this.sceneSetup.pCamera ? CAMERA_MODE.PERSPECTIVE : CAMERA_MODE.ORTHOGRAPHIC;
   }
   
+  toggleCamera() {
+    if (this.getCameraMode() === CAMERA_MODE.PERSPECTIVE) {
+      this.setCameraMode(CAMERA_MODE.ORTHOGRAPHIC);
+    } else {
+      this.setCameraMode(CAMERA_MODE.PERSPECTIVE);
+    }
+  }
 }
 
+export const CAMERA_MODE = {
+  ORTHOGRAPHIC: 'ORTHOGRAPHIC',
+  PERSPECTIVE: 'PERSPECTIVE'  
+};

web/app/3d/ui/ctrl.js

@@ -123,6 +123,7 @@ UI.prototype.fillControlBar = function() {
   this.app.controlBar.add('RefreshSketches', RIGHT, {'label': null});
   this.app.controlBar.add('ShowSketches', RIGHT, {'label': 'sketches'});
   this.app.controlBar.add('DeselectAll', RIGHT, {'label': null});
+  this.app.controlBar.add('ToggleCameraMode', RIGHT, {'label': null});
   this.app.controlBar.add('menu.file', LEFT);
   this.app.controlBar.add('menu.craft', LEFT);
   this.app.controlBar.add('menu.boolean', LEFT);

web/app/index.js

@@ -1,5 +1,4 @@
 //import './utils/jqueryfy'
-//import './utils/three-loader'
 import App from './3d/modeler-app'
 
 window.onload = function() {

web/app/utils/three-loader.js

@@ -1,6 +0,0 @@
-import * as THREE from 'three';
-window.THREE = THREE;
-require('../../lib/three/TrackballControls');
-require('../../lib/three/OrbitControls');
-require('../../lib/three/TransformControls');
-