fix (api): getZoom debug

With the miniGlobe, getZoom used to always return 0.

Feature : added new PlanarControls (iTowns#454)

* Feature : added new PlanarControls

PlanarControls offers ergonomic camera controls for the planar mode : drag, pan, orbit,
zoom and animated expression to smoothly move and orient the camera.

Modified planar example to use these controls
Update contributors

Feature : added new PlanarControls

PlanarControls offers ergonomic camera controls for the planar mode : drag, pan, orbit,
zoom and animated expression to smoothly move and orient the camera.

Modified planar example to use these controls
Update contributors

Modifications following peppsac review :
-all external variables are now within the class, this allows to
instanciate more than one controller.
-clamp01 function removed, using THREE clamp instead.
-various style modifications (separator removed, const array format...)

planarcontrols modifications following peppsac review :
update() uses mainloop's deltatime, no longer call camera.update()
this.camera.position replaces this.position

removed options.startposition and startlook, start view with Y instead of S (used for picking)

many modifications following review by Autra, see PR

CONTRIBUTORS.md

@@ -16,6 +16,11 @@ The following people have contributed to iTowns 2.
 
 * [AtolCD](http://www.atolcd.com)
   * [Thomas Broyer](https://github.com/tbroyer)
+
+* [LIRIS](https://liris.cnrs.fr/)
+  * [Nicolas Saul](https://github.com/NikoSaul)
+  * [Emmanuel Schmück](https://github.com/EmmanuelSchmuck/)
+  * [Marie Lamure](https://github.com/mlamure)
 
 The following organizations supported iTowns2 :
 * IGN ( http://www.ign.fr )

examples/planar.html

@@ -59,10 +59,13 @@
         <div id="help">
             <p>Key bindings</p>
             <ul>
-              <li>↑ ↓ : forward / backward</li>
-              <li>← → : strafe left / right</li>
-              <li>⇞ (PageUp), ⇟ (PageDown) : move up / down</li>
-              <li>mouse Clic + drag : camera rotation</li>
+              <li>Left-Click: camera translation (drag)</li>
+              <li>Right-Click: camera translation (pan)</li>
+              <li>Ctrl + Left-Click: camera rotation (orbit)</li>
+              <li>Spacebar / Wheel-Click: smart zoom</li>
+              <li>Mouse Wheel: zoom in/out</li>
+              <li>T: orient camera to a top view</li>
+              <li>Y: move camera to start position</li>
             </ul>
         </div>
         <div id="viewerDiv"></div>

examples/planar.js

@@ -67,7 +67,7 @@ view.camera.camera3D.lookAt(extent.center().xyz());
 
 // instanciate controls
 // eslint-disable-next-line no-new
-new itowns.FirstPersonControls(view, { focusOnClick: true, moveSpeed: 1000 });
+new itowns.PlanarControls(view, {});
 
 // Request redraw
 view.notifyChange(true);

src/Main.js

@@ -23,6 +23,7 @@ export { default as PointsMaterial } from './Renderer/PointsMaterial';
 export { default as PointCloudProcessing } from './Process/PointCloudProcessing';
 export { default as FlyControls } from './Renderer/ThreeExtended/FlyControls';
 export { default as FirstPersonControls } from './Renderer/ThreeExtended/FirstPersonControls';
+export { default as PlanarControls } from './Renderer/ThreeExtended/PlanarControls';
 export { default as GeoJSON2Three } from './Renderer/ThreeExtended/GeoJSON2Three';
 export { CONTROL_EVENTS } from './Renderer/ThreeExtended/GlobeControls';
 export { default as DEMUtils } from './utils/DEMUtils';

src/Process/GlobeTileProcessing.js

@@ -12,6 +12,18 @@ let SSE_SUBDIVISION_THRESHOLD;
 
 const worldToScaledEllipsoid = new THREE.Matrix4();
 
+function _preSSE(view) {
+    const canvasSize = view.mainLoop.gfxEngine.getWindowSize();
+    const hypotenuse = canvasSize.length();
+    const radAngle = view.camera.camera3D.fov * Math.PI / 180;
+
+     // TODO: not correct -> see new preSSE
+    // const HFOV = 2.0 * Math.atan(Math.tan(radAngle * 0.5) / context.camera.ratio);
+    const HYFOV = 2.0 * Math.atan(Math.tan(radAngle * 0.5) * hypotenuse / canvasSize.x);
+
+    preSSE = hypotenuse * (2.0 * Math.tan(HYFOV * 0.5));
+}
+
 export function preGlobeUpdate(context, layer) {
     // We're going to use the method described here:
     //    https://cesiumjs.org/2013/04/25/Horizon-culling/
@@ -30,15 +42,7 @@ export function preGlobeUpdate(context, layer) {
     vhMagnitudeSquared = cV.lengthSq() - 1.0;
 
     // pre-sse
-    const canvasSize = context.engine.getWindowSize();
-    const hypotenuse = canvasSize.length();
-    const radAngle = context.camera.camera3D.fov * Math.PI / 180;
-
-     // TODO: not correct -> see new preSSE
-    // const HFOV = 2.0 * Math.atan(Math.tan(radAngle * 0.5) / context.camera.ratio);
-    const HYFOV = 2.0 * Math.atan(Math.tan(radAngle * 0.5) * hypotenuse / canvasSize.x);
-
-    preSSE = hypotenuse * (2.0 * Math.tan(HYFOV * 0.5));
+    _preSSE(context.view);
 }
 
 function pointHorizonCulling(pt) {
@@ -139,7 +143,8 @@ export function globeSchemeTileWMTS(type) {
     return schemeT;
 }
 
-export function computeTileZoomFromDistanceCamera(distance) {
+export function computeTileZoomFromDistanceCamera(distance, view) {
+    _preSSE(view);
     const sizeEllipsoid = ellipsoidSizes().x;
     const preSinus = SIZE_TEXTURE_TILE * (SSE_SUBDIVISION_THRESHOLD * 0.5) / preSSE / sizeEllipsoid;
 

src/Renderer/ThreeExtended/GlobeControls.js

@@ -1615,7 +1615,7 @@ GlobeControls.prototype.isAnimationEnabled = function isAnimationEnabled() {
  * @return     {number}  The zoom .
  */
 GlobeControls.prototype.getZoom = function getZoom() {
-    return computeTileZoomFromDistanceCamera(this.getRange());
+    return computeTileZoomFromDistanceCamera(this.getRange(), this._view);
 };
 
 /**