dynamic near far

examples/assets/localScripts/focus.js

@@ -33,7 +33,6 @@ module.exports = class Focus {
         Math.min(_this.distance, _this.conf.maxDist),
         _this.conf.minDist
       );
-      gV.computeNearFarCamera();
     });
   }
 
@@ -73,7 +72,5 @@ module.exports = class Focus {
     camera.position.copy(position);
     camera.quaternion.copy(quaternion);
     camera.updateProjectionMatrix();
-
-    localContext.getGameView().computeNearFarCamera();
   }
 };

index.html

@@ -177,7 +177,7 @@ <h1 class="projects_section_title">UD-Game</h1>
       addProjectElement(
         'Local Avatar Game',
         divPrjUDGame,
-        './examples/Avatar.html',
+        './examples/AvatarGame.html',
         'This example implements a local mini game illustrating an avatar walking in the city',
         './examples/assets/img/examples_images/AvatarGame.png'
       );

src/Components/Camera/CameraUtils.js

@@ -42,3 +42,41 @@ export function focusCameraOn(view, controls, targetPos, options = {}) {
     }
   });
 }
+
+
+/**
+ * Compute near and far camera attributes to fit a quadrilatere of the extent + height size
+ * @param {THREE.Camera} camera 
+ * @param {itowns.Extent} extent 
+ * @param {Number} height 
+ */
+export function computeNearFarCamera(camera, extent, height) {
+
+  const points = [
+    new THREE.Vector3(extent.west, extent.south, 0),
+    new THREE.Vector3(extent.west, extent.south, height),
+    new THREE.Vector3(extent.west, extent.north, 0),
+    new THREE.Vector3(extent.west, extent.north, height),
+    new THREE.Vector3(extent.east, extent.south, 0),
+    new THREE.Vector3(extent.east, extent.south, height),
+    new THREE.Vector3(extent.east, extent.north, 0),
+    new THREE.Vector3(extent.east, extent.north, height),
+  ];
+
+  const dirCamera = camera.getWorldDirection(new THREE.Vector3());
+
+  let min = Infinity;
+  let max = -Infinity;
+  points.forEach(function (p) {
+    const pointDir = p.clone().sub(camera.position);
+    const cos = pointDir.dot(dirCamera) / pointDir.length(); //dircamera length is 1
+    const dist = p.distanceTo(camera.position) * cos;
+    if (min > dist) min = dist;
+    if (max < dist) max = dist;
+  });
+
+  camera.near = Math.max(min, 0.000001);
+  camera.far = max;
+
+  camera.updateProjectionMatrix();
+}

src/Templates/AllWidget/AllWidget.js

@@ -10,6 +10,8 @@ const $3DTemporalTileset = Widgets.$3DTemporalTileset;
 
 import './AllWidget.css';
 
+import { computeNearFarCamera } from '../../Components/Camera/CameraUtils';
+
 /**
  * Represents the base HTML content of a demo for UD-Viz and provides methods to
  * dynamically add module views.
@@ -46,6 +48,12 @@ export class AllWidget {
         // Initialize iTowns 3D view
         _this.init3DView();
 
+        //dynamic near far computation
+        _this.view.addFrameRequester(
+          itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER,
+          computeNearFarCamera.bind(null, _this.view.camera.camera3D, _this.extent, 400)
+        );
+
         resolve(_this.config);
       });
     });
@@ -457,10 +465,10 @@ export class AllWidget {
         } else {
           console.warn(
             'The 3D Tiles extension ' +
-              extensionsConfig[i] +
-              ' specified in generalDemoConfig.json is not supported ' +
-              'by UD-Viz yet. Only 3DTILES_temporal and ' +
-              '3DTILES_batch_table_hierarchy are supported.'
+            extensionsConfig[i] +
+            ' specified in generalDemoConfig.json is not supported ' +
+            'by UD-Viz yet. Only 3DTILES_temporal and ' +
+            '3DTILES_batch_table_hierarchy are supported.'
           );
         }
       }
@@ -532,7 +540,7 @@ export class AllWidget {
     proj4.default.defs(
       'EPSG:3946',
       '+proj=lcc +lat_1=45.25 +lat_2=46.75' +
-        ' +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
+      ' +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
     );
 
     // Define geographic extent: CRS, min/max X, min/max Y

src/Views/GameView/GameView.js

@@ -9,6 +9,8 @@ import LocalScript from '../../Game/GameObject/Components/LocalScript';
 import { View3D } from '../View3D/View3D';
 import { Audio, Render } from '../../Game/Game';
 
+import { computeNearFarCamera } from '../../Components/Camera/CameraUtils';
+
 const udvGame = require('../../Game/Game');
 const THREEUtils = udvGame.Components.THREEUtils;
 
@@ -216,7 +218,7 @@ export class GameView extends View3D {
             if (iV) iV.notifyChange(_this.getCamera());
 
             //adjust camera params
-            _this.computeNearFarCamera();
+            computeNearFarCamera(_this.getCamera(), _this.extent, 400);
             _this.render();
           }
         }

src/Views/View3D/View3D.js

@@ -4,6 +4,8 @@ import * as THREE from 'three';
 import * as itowns from 'itowns';
 import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
 
+import { computeNearFarCamera } from '../../Components/Camera/CameraUtils';
+
 import './View3D.css';
 import { InputManager } from '../../Components/InputManager';
 
@@ -59,7 +61,7 @@ export class View3D {
     proj4.default.defs(
       this.projection,
       '+proj=lcc +lat_1=45.25 +lat_2=46.75' +
-        ' +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
+      ' +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
     );
 
     //itowns view
@@ -321,8 +323,8 @@ export class View3D {
 
     //dynamic near far computation
     this.itownsView.addFrameRequester(
-      itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, //TODO another event (On camera change ?)
-      this.computeNearFarCamera.bind(this)
+      itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER,
+      computeNearFarCamera.bind(null, this.getCamera(), this.extent, 400)
     );
   }
 
@@ -373,42 +375,7 @@ export class View3D {
     this.setupAndAdd3DTilesLayers();
 
     //disable itowns resize
-    this.itownsView.resize = function () {};
-  }
-
-  /**
-   * dynamic computation of the near and far of the camera to fit the extent
-   */
-  computeNearFarCamera() {
-    const camera = this.getCamera();
-    const height = 400; //TODO compute this dynamically and opti (remove new)
-    const points = [
-      new THREE.Vector3(this.extent.west, this.extent.south, 0),
-      new THREE.Vector3(this.extent.west, this.extent.south, height),
-      new THREE.Vector3(this.extent.west, this.extent.north, 0),
-      new THREE.Vector3(this.extent.west, this.extent.north, height),
-      new THREE.Vector3(this.extent.east, this.extent.south, 0),
-      new THREE.Vector3(this.extent.east, this.extent.south, height),
-      new THREE.Vector3(this.extent.east, this.extent.north, 0),
-      new THREE.Vector3(this.extent.east, this.extent.north, height),
-    ];
-
-    const dirCamera = camera.getWorldDirection(new THREE.Vector3());
-
-    let min = Infinity;
-    let max = -Infinity;
-    points.forEach(function (p) {
-      const pointDir = p.clone().sub(camera.position);
-      const cos = pointDir.dot(dirCamera) / pointDir.length(); //dircamera length is 1
-      const dist = p.distanceTo(camera.position) * cos;
-      if (min > dist) min = dist;
-      if (max < dist) max = dist;
-    });
-
-    camera.near = Math.max(min, 0.000001);
-    camera.far = max;
-
-    camera.updateProjectionMatrix();
+    this.itownsView.resize = function () { };
   }
 
   /**
@@ -523,10 +490,10 @@ export class View3D {
         } else {
           console.warn(
             'The 3D Tiles extension ' +
-              extensionsConfig[i] +
-              ' specified in generalDemoConfig.json is not supported ' +
-              'by UD-Viz yet. Only 3DTILES_temporal and ' +
-              '3DTILES_batch_table_hierarchy are supported.'
+            extensionsConfig[i] +
+            ' specified in generalDemoConfig.json is not supported ' +
+            'by UD-Viz yet. Only 3DTILES_temporal and ' +
+            '3DTILES_batch_table_hierarchy are supported.'
           );
         }
       }