add option to change field of view

doc/viewer.rst

@@ -30,6 +30,7 @@ Initialization and Configuration
   * *atomClicked* set the event handler for an atom double clicked event (see *atomDoubleClicked*). The default is null (no listener).
   * *animateTime* controls the default animation duration in milliseconds. By default, the animation is set to 0 (no animation). By setting it to higher values, rotation, zoom and shift are animated. Note that enabling this can have negative impact on performance, especially with large molecules and on low-end devices.
   * *fog* whether depth-cue ('fog') should be enabled. By default, fog is enabled. Pass false to disable fog.
+  * *fov* the field of view in degrees. Default is 45 degrees.
 
 
 The following code defines a new viewer. This can be done during page load time, before the DOMContentLoaded event has been emitted. Render objects can only be added once the DOMContentLoaded event has fired. Typically it's best to put any object loading and display code into a DOMContentLoaded event handler.

src/gfx/cam.js

@@ -94,6 +94,11 @@ Cam.prototype = {
     return this._fovY;
   },
 
+  setFieldOfViewY : function(value) {
+    this._fovY = value;
+    this._updateProjectionMat = true;
+  },
+
   aspectRatio : function() {
     return this._width / this._height;
   },

src/mouse.js

@@ -158,8 +158,10 @@ MouseHandler.prototype = {
 
     // adjust speed according to distance to camera center, it's not
     // perfect but gives good enough results.
-    var speed = 0.001 * this._cam.zoom();
-    this._cam.panXY(speed * delta.x, speed * delta.y);
+    var speed = 
+      0.002 * Math.tan(0.5 * this._cam.fieldOfViewY()) * this._cam.zoom();
+    this._cam.panXY(speed * delta.x,
+                    speed * delta.y);
     this._lastMousePos = newMousePos;
     this._viewer.requestRedraw();
   }

src/touch.js

@@ -129,8 +129,10 @@ TouchHandler.prototype = {
     if (newState.numTouches === 2 && this._touchState.numTouches === 2) {
       // scale pan amount by current zoom value. This increases the camera
       // shift when far away from the image center. 
-      this._cam.panXY(newState.deltaCenter.x * 0.001 * this._cam.zoom(),
-                      newState.deltaCenter.y * 0.001 * this._cam.zoom());
+      var speed = 
+        0.002 * Math.tan(0.5 * this._cam.fieldOfViewY()) * this._cam.zoom();
+      this._cam.panXY(newState.deltaCenter.x * speed,
+                      newState.deltaCenter.y * speed);
     }
     var deltaZRotation =  - newState.deltaRotation;
     this._cam.rotateZ(deltaZRotation);

src/viewer.js

@@ -193,6 +193,7 @@ Viewer.prototype = {
       slabMode : slabModeToStrategy(opts.slabMode),
       atomClick: opts.atomClicked || opts.atomClick || null,
       outline : optValue(opts, 'outline', true),
+      fov : optValue(opts, 'fov', 45.0),
       // for backwards compatibility
       atomDoubleClicked : optValue(opts, 'atomDoubleClicked', 
                                    optValue(opts, 'atomDoubleClick', 'center')),
@@ -253,6 +254,9 @@ Viewer.prototype = {
         this._cam.fog(value);
         this._options.fog = value;
         this.requestRedraw();
+      } else if (optName === 'fov') {
+        this._options.fov = value;
+        this._cam.setFieldOfViewY(value * Math.PI / 180.0);
       } else {
         this._options[optName] = value;
       }
@@ -313,6 +317,7 @@ Viewer.prototype = {
     this._cam.setUpsamplingFactor(this._canvas.superSamplingFactor());
     this._cam.fog(this._options.fog);
     this._cam.setFogColor(this._options.background);
+    this._cam.setFieldOfViewY(this._options.fov * Math.PI / 180.0);
     this._mouseHandler.setCam(this._cam);
 
     var c = this._canvas;