take into account aspect ratio for ortho cam

src/lib/EditorControls.js

@@ -146,6 +146,11 @@ THREE.EditorControls = function(_object, domElement) {
     scope.dispatchChange();
   };
 
+  var ratio = 1;
+  this.setAspectRatio = function (_ratio) {
+    ratio = _ratio;
+  }
+
   this.zoom = function(delta) {
     var distance = object.position.distanceTo(center);
 
@@ -162,9 +167,9 @@ THREE.EditorControls = function(_object, domElement) {
         factor = -1;
       }
       delta = distance * scope.zoomSpeed * factor;
-      object.left -= delta;
+      object.left -= delta * ratio;
       object.bottom -= delta;
-      object.right += delta;
+      object.right += delta * ratio;
       object.top += delta;
       if (object.left >= -0.0001) { return; }
       object.updateProjectionMatrix();

src/lib/cameras.js

@@ -15,7 +15,9 @@ const orthoCameraMemory = {
  * Initialize various cameras, store original one.
  */
 export function initCameras (inspector) {
-  const originalCamera = inspector.currentCameraEl = inspector.sceneEl.camera.el;
+  const sceneEl = inspector.sceneEl;
+
+  const originalCamera = inspector.currentCameraEl = sceneEl.camera.el;
   inspector.currentCameraEl.setAttribute(
     'data-aframe-inspector-original-camera',
     ''
@@ -40,29 +42,32 @@ export function initCameras (inspector) {
   perspectiveCamera.position.set(0, 1.6, 2);
   perspectiveCamera.lookAt(new THREE.Vector3(0, 1.6, -1));
   perspectiveCamera.updateMatrixWorld();
-  inspector.sceneEl.object3D.add(perspectiveCamera);
-  inspector.sceneEl.camera = perspectiveCamera;
+  sceneEl.object3D.add(perspectiveCamera);
+  sceneEl.camera = perspectiveCamera;
 
-  const orthoCamera = new THREE.OrthographicCamera(-10, 10, 10, -10);
-  inspector.sceneEl.object3D.add(orthoCamera);
+  const ratio = sceneEl.canvas.width / sceneEl.canvas.height;
+  const orthoCamera = new THREE.OrthographicCamera(-10 * ratio, 10 * ratio, 10, -10);
+  sceneEl.object3D.add(orthoCamera);
 
   const cameras = inspector.cameras = {
     perspective: perspectiveCamera,
     original: originalCamera,
     ortho: orthoCamera
   };
 
+  // Command to switch to perspective.
   Events.on('cameraperspectivetoggle', () => {
     saveOrthoCamera(inspector.camera, currentOrthoDir);
-    inspector.sceneEl.camera = inspector.camera = cameras.perspective;
+    sceneEl.camera = inspector.camera = cameras.perspective;
     Events.emit('cameratoggle', {camera: inspector.camera, value: 'perspective'});
   });
 
+  // Command to switch to ortographic.
   Events.on('cameraorthographictoggle', dir => {
     saveOrthoCamera(inspector.camera, currentOrthoDir);
-    inspector.sceneEl.camera = inspector.camera = cameras.ortho;
+    sceneEl.camera = inspector.camera = cameras.ortho;
     currentOrthoDir = dir;
-    setOrthoCamera(cameras.ortho, dir);
+    setOrthoCamera(cameras.ortho, dir, ratio);
 
     // Set initial rotation for the respective orthographic camera.
     if (cameras.ortho.rotation.x === 0 && cameras.ortho.rotation.y === 0 &&
@@ -86,10 +91,10 @@ function saveOrthoCamera (camera, dir) {
   info.bottom = camera.bottom;
 }
 
-function setOrthoCamera (camera, dir) {
+function setOrthoCamera (camera, dir, ratio) {
   const info = orthoCameraMemory[dir];
-  camera.left = info.left || -10;
-  camera.right = info.right || 10;
+  camera.left = info.left || (-10 * ratio);
+  camera.right = info.right || (10 * ratio);
   camera.top = info.top || 10;
   camera.bottom = info.bottom || -10;
   camera.position.copy(info.position);

src/lib/viewport.js

@@ -17,9 +17,10 @@ const Events = require('./Events');
 function Viewport(inspector) {
   // Initialize raycaster and picking in differentpmodule.
   const mouseCursor = initRaycaster(inspector);
+  const sceneEl = inspector.sceneEl;
 
   let originalCamera = inspector.cameras.original;
-  inspector.sceneEl.addEventListener('camera-set-active', event => {
+  sceneEl.addEventListener('camera-set-active', event => {
     // If we're in edit mode, save the newly active camera and activate when exiting.
     if (inspector.opened) {
       originalCamera = event.detail.cameraEl;
@@ -111,6 +112,7 @@ function Viewport(inspector) {
   controls.center.set(0, 1.6, 0);
   controls.rotationSpeed = 0.0035;
   controls.zoomSpeed = 0.05;
+  controls.setAspectRatio(sceneEl.canvas.width / sceneEl.canvas.height);
 
   Events.on('cameratoggle', data => {
     controls.setCamera(data.camera);