feat(View): add helpers to get threejs renderer, renderer size and ca…

…mera
iTowns · Aug 23, 2023 · b5a903c · b5a903c
1 parent c3bc003
commit b5a903c
Show file tree

Hide file tree

Showing 48 changed files with 197 additions and 178 deletions.
diff --git a/examples/3dtiles_basic.html b/examples/3dtiles_basic.html
@@ -32,7 +32,8 @@
             var viewerDiv = document.getElementById('viewerDiv');
 
             var view = new itowns.GlobeView(viewerDiv, placement);
-            view.camera.camera3D.near = 5;
+            var camera3D = view.getThreeJsCamera();
+            camera3D.near = 5;
             setupLoadingScreen(viewerDiv, view);
 
             var menuGlobe = new GuiTools('menuDiv', view, 300);
@@ -84,9 +85,9 @@
             debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerDiscreteLOD, d);
             debug.create3dTilesDebugUI(menuGlobe.gui, view, $3dTilesLayerRequestVolume, d);
             d.zoom = function() {
-                view.camera.camera3D.position.set(1215013.9, -4736315.5, 4081597.5);
-                view.camera.camera3D.quaternion.set(0.9108514448729665, 0.13456816437801225, 0.1107206134840362, 0.3741416847378546);
-                view.notifyChange(view.camera.camera3D);
+                camera3D.position.set(1215013.9, -4736315.5, 4081597.5);
+                camera3D.quaternion.set(0.9108514448729665, 0.13456816437801225, 0.1107206134840362, 0.3741416847378546);
+                view.notifyChange(camera3D);
             }
             menuGlobe.gui.add(d, 'zoom').name('Go to point cloud');
         </script>

diff --git a/examples/3dtiles_pointcloud.html b/examples/3dtiles_pointcloud.html
@@ -15,7 +15,7 @@
             <ul>
               <li>Display your pointcloud</li>
               <li>Use classification to assign colour to each points</li>
-              <li>Switch between mode on the left panel</li>             
+              <li>Switch between mode on the left panel</li>
             </ul>
         </div>
         <div id="viewerDiv"></div>
@@ -27,7 +27,7 @@
         <script type="text/javascript">
             /* global itowns,document,GuiTools*/
 
-            
+
             var placement = {
                 coord: new itowns.Coordinates('EPSG:4326', 3.695885, 43.397379, 0),
 
@@ -39,7 +39,8 @@
             var viewerDiv = document.getElementById('viewerDiv');
 
             var view = new itowns.GlobeView(viewerDiv, placement);
-            view.camera.camera3D.near = 5;
+            var cameraThree = view.getThreeJsCamera();
+            cameraThree.near = 5;
             setupLoadingScreen(viewerDiv, view);
 
             var menuGlobe = new GuiTools('menuDiv', view, 300);
@@ -75,14 +76,14 @@
             itowns.View.prototype.addLayer.call(view, $3dTilesLayerSetePC);
             function switchMode(){
                 let pntsLayer = view.getLayerById("3d-tiles-sete");
-                
+
                 if(pntsLayer){
                     pntsLayer = pntsLayer;
                     pntsLayer.pntsMode = pntsLayer.pntsMode == itowns.PNTS_MODE.COLOR ? itowns.PNTS_MODE.CLASSIFICATION : itowns.PNTS_MODE.COLOR;
-                    view.notifyChange(view.camera.camera3D);
+                    view.notifyChange(cameraThree);
                 }
             }
-        
+
             // Add the UI Debug
             var d = new debug.Debug(view, menuGlobe.gui);
             debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
@@ -93,9 +94,9 @@
             }
             menuGlobe.gui.add(d, 'switch').name('Mode Switch');
 
-
 
-
+
+
 
         </script>
     </body>

diff --git a/examples/effects_postprocessing.html b/examples/effects_postprocessing.html
@@ -87,7 +87,7 @@
                 var r = g.renderer;
                 r.setRenderTarget(g.fullSizeRenderTarget);
                 r.clear();
-                r.render(view.scene, view.camera.camera3D);
+                r.render(view.scene, view.getThreeJsCamera());
 
                 quad.material.uniforms.tDiffuse.value = g.fullSizeRenderTarget.texture;
                 quad.material.uniforms.tSize.value.set(

diff --git a/examples/effects_stereo.html b/examples/effects_stereo.html
@@ -38,6 +38,7 @@
 
             // Instanciate iTowns GlobeView*
             var view = new itowns.GlobeView(viewerDiv, placement);
+            var camera3D = view.getThreeJsCamera();
 
             // Eye separation value
             var eyeSep = 0.064;
@@ -111,7 +112,7 @@
 
                 view.render = function render() {
                     r.clear();
-                    effect.render(view.scene, view.camera.camera3D);
+                    effect.render(view.scene, camera3D);
                 };
 
                 view.notifyChange();
@@ -125,8 +126,7 @@
             function enableAnaglyph() {
                 var _eff;
                 if (effect instanceof THREE.AnaglyphEffect) return;
-                _eff = new THREE.AnaglyphEffect(view.mainLoop.gfxEngine.renderer,
-                    view.camera.camera3D);
+                _eff = new THREE.AnaglyphEffect(view.mainLoop.gfxEngine.renderer, camera3D);
                 enableEffect(_eff);
             }
 
@@ -139,8 +139,7 @@
             function enableParallax() {
                 var _eff;
                 if (effect instanceof THREE.ParallaxBarrierEffect) return;
-                _eff = new THREE.ParallaxBarrierEffect(view.mainLoop.gfxEngine.renderer,
-                    view.camera.camera3D);
+                _eff = new THREE.ParallaxBarrierEffect(view.mainLoop.gfxEngine.renderer, camera3D);
                 enableEffect(_eff);
             }
 
@@ -150,8 +149,7 @@
             function enableStereo() {
                 var _eff;
                 if (effect instanceof THREE.StereoEffect) return;
-                _eff = new THREE.StereoEffect(view.mainLoop.gfxEngine.renderer,
-                    view.camera.camera3D);
+                _eff = new THREE.StereoEffect(view.mainLoop.gfxEngine.renderer, camera3D);
                 enableEffect(_eff);
             }
 

diff --git a/examples/entwine_simple_loader.html b/examples/entwine_simple_loader.html
@@ -43,7 +43,7 @@
             var eptLayer, eptSource;
 
             function onLayerReady() {
-                var camera = view.camera.camera3D;
+                var camera = view.getThreeJsCamera();
 
                 var lookAt = new itowns.THREE.Vector3();
                 var size = new itowns.THREE.Vector3();

diff --git a/examples/itowns-potree.html b/examples/itowns-potree.html
@@ -160,9 +160,8 @@
             // Controls and camera specific setting.
             itownsViewer.controls.minDistanceCollision = 0.01;
             itownsViewer.controls.minDistance = 20;
-            itownsViewer.camera.camera3D.near = 0.1;
-
-
+            var cameraThree = itownsViewer.getThreeJsCamera();
+            cameraThree.near = 0.1;
 
             // ---------- TWEAK ITOWNS VIEWER TO SUPPORT POTREE VISUALIZATION : ----------
 
@@ -179,9 +178,9 @@
             })
 
             // Set Potree viewer camera as iTowns viewer camera.
-            const camera = itownsViewer.camera.camera3D;
-            camera.zoomTo = () => {};
-            potreeViewer.scene.cameraP = camera;
+            const cameraThree = itownsViewer.getThreeJsCamera();
+            cameraThree.zoomTo = () => {};
+            potreeViewer.scene.cameraP = cameraThree;
 
             // TODO : should be moved to Label2DRenderer constructor
             itownsViewer.mainLoop.gfxEngine.label2dRenderer.domElement.style.pointerEvents = 'none';

diff --git a/examples/js/OrientedImageHelper.js b/examples/js/OrientedImageHelper.js
@@ -93,7 +93,7 @@ function setupViewCameraLookingAtObject(camera, coord, objectToLookAt) {
 // eslint-disable-next-line no-unused-vars
 function setupViewCameraDecomposing(view, camera) {
     let upWorld;
-    const viewCamera = view.camera.camera3D;
+    const viewCamera = view.getThreeJsCamera();
     camera.matrixWorld.decompose(viewCamera.position, viewCamera.quaternion, viewCamera.scale);
 
     // setup up vector

diff --git a/examples/js/plugins/DragNDrop.js b/examples/js/plugins/DragNDrop.js
@@ -128,7 +128,7 @@ const DragNDrop = (function _() {
                     }
 
                     // Move the camera
-                    itowns.CameraUtils.transformCameraToLookAtTarget(_view, _view.camera.camera3D, extent);
+                    itowns.CameraUtils.transformCameraToLookAtTarget(_view, _view.getThreeJsCamera(), extent);
                 });
             };
 

diff --git a/examples/laz_dragndrop.html b/examples/laz_dragndrop.html
@@ -45,23 +45,21 @@
                         view.scene.add(points);
                         points.updateMatrixWorld(true);
 
-                        var camera = view.camera.camera3D;
-
                         var lookAt = new itowns.THREE.Vector3();
                         var size = new itowns.THREE.Vector3();
                         geometry.boundingBox.getSize(size);
                         geometry.boundingBox.getCenter(lookAt);
 
-                        camera.far = Math.max(2.0 * size.length(), camera.far);
+                        cameraThree.far = Math.max(2.0 * size.length(), camera.far);
 
                         var position = geometry.boundingBox.min.clone().add(size.multiply({ x: 0, y: 0, z: size.x / size.z }));
 
-                        camera.position.copy(position);
-                        camera.lookAt(lookAt);
+                        cameraThree.position.copy(position);
+                        cameraThree.lookAt(lookAt);
 
                         controls.options.moveSpeed = size.length();
 
-                        view.notifyChange(camera);
+                        view.notifyChange(cameraThree);
                         controls.reset();
                     });
                 };

diff --git a/examples/misc_camera_animation.html b/examples/misc_camera_animation.html
@@ -91,7 +91,7 @@
 
             function travel() {
                 return itowns.CameraUtils
-                    .sequenceAnimationsToLookAtTarget(view, view.camera.camera3D, pathTravel);
+                    .sequenceAnimationsToLookAtTarget(view, view.getThreeJsCamera(), pathTravel);
             }
 
 

diff --git a/examples/misc_camera_traveling.html b/examples/misc_camera_traveling.html
@@ -48,6 +48,7 @@
 
             // Instantiate iTowns GlobeView :
             let view = new itowns.GlobeView(viewerDiv, initialPlacement);
+            var cameraThree = view.getThreeJsCamera();
 
             // Sets a loading screen :
             setupLoadingScreen(viewerDiv, view);
@@ -89,7 +90,7 @@
                 // Retrieve current camera transform options
                 const cameraTransformOptions = itowns.CameraUtils.getTransformCameraLookingAtTarget(
                     view,
-                    view.camera.camera3D,
+                    view.getThreeJsCamera(),
                 );
                 // Change default easing parameter for animation speed
                 // (see https://sole.github.io/tween.js/examples/03_graphs.html)
@@ -101,7 +102,7 @@
                 // Create a CameraHelper (https://threejs.org/docs/index.html?q=Camera#api/en/helpers/CameraHelper) at
                 // the current position of the camera. The camera is copied, and the copy's `far` is lowered. This
                 // renders shorter axes on the displayed CameraHelper.
-                const copyCamera = view.camera.camera3D.clone();
+                const copyCamera = cameraThree.clone();
                 copyCamera.far = 50;
                 const helper = new itowns.THREE.CameraHelper(copyCamera);
                 helper.updateWorldMatrix(true, false);
@@ -114,12 +115,12 @@
                     travelOn = true;
                     return itowns.CameraUtils.sequenceAnimationsToLookAtTarget(
                         view,
-                        view.camera.camera3D,
+                        cameraThree,
                         travelSteps,
                     ).then(() => { travelOn = false; });
                 }
 
-                itowns.CameraUtils.stop(view, view.camera.camera3D);  // If travel is on, interrupt it
+                itowns.CameraUtils.stop(view, cameraThree);  // If travel is on, interrupt it
             }
 
             // Listens for user input :

diff --git a/examples/misc_compare_25d_3d.html b/examples/misc_compare_25d_3d.html
@@ -99,8 +99,8 @@
                         // eslint-disable-next-line no-console
                         console.info('Globe initialized');
                         Promise.all(promises).then(function init() {
-                            var planarCamera = planarView.camera.camera3D;
-                            var globeCamera = view.camera.camera3D;
+                            var planarCamera = planarView.getThreeJsCamera();
+                            var globeCamera = view.getThreeJsCamera();
                             var params;
                             menuGlobe.addImageryLayersGUI(view.getLayers(function filterColor(l) { return l.isColorLayer; }));
                             menuGlobe.addElevationLayersGUI(view.getLayers(function filterElevation(l) { return l.isElevationLayer; }));

diff --git a/examples/misc_georeferenced_images.html b/examples/misc_georeferenced_images.html
@@ -141,8 +141,8 @@
             setupViewCameraDecomposing(view, camera);
 
             // open view camera FOV of 10° to see landscape around the picture.
-            view.camera.camera3D.fov += 10;
-            view.camera.camera3D.updateProjectionMatrix();
+            view.getThreeJsCamera().fov += 10;
+            view.getThreeJsCamera().updateProjectionMatrix();
 
             // uncomment to debug camera
             // addCameraHelper(view, camera);

diff --git a/examples/potree_25d_map.html b/examples/potree_25d_map.html
@@ -56,6 +56,7 @@
 
                 // TODO: do we really need to disable logarithmicDepthBuffer ?
                 view = new itowns.View('EPSG:3946', viewerDiv);
+                var cameraThree = view.getThreeJsCamera();
                 setupLoadingScreen(viewerDiv, view);
                 view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);
 
@@ -83,13 +84,13 @@
                 view.domElement.addEventListener('dblclick', dblClickHandler);
 
                 function placeCamera(position, lookAt) {
-                    view.camera.camera3D.position.copy(position);
-                    view.camera.camera3D.lookAt(lookAt);
+                    cameraThree.position.copy(position);
+                    cameraThree.lookAt(lookAt);
                     // create controls
                     controls = new itowns.FirstPersonControls(view, { focusOnClick: true });
                     debugGui.add(controls.options, 'moveSpeed', 1, 100).name('Movement speed');
 
-                    view.notifyChange(view.camera.camera3D);
+                    view.notifyChange(cameraThree);
                 }
 
                 // add potreeLayer to scene
@@ -104,7 +105,7 @@
 
                     debug.PotreeDebug.initTools(view, potreeLayer, debugGui);
 
-                    view.camera.camera3D.far = 2.0 * size.length();
+                    cameraThree.far = 2.0 * size.length();
 
                     ratio = size.x / size.z;
                     position = potreeLayer.root.bbox.min.clone().add(

diff --git a/examples/source_stream_wfs_3d.html b/examples/source_stream_wfs_3d.html
@@ -158,7 +158,7 @@
                 var i;
                 var mesh;
                 if (meshes.length) {
-                    view.notifyChange(view.camera.camera3D, true);
+                    view.notifyChange(view.getThreeJsCamera(), true);
                 }
                 for (i = 0; i < meshes.length; i++) {
                     mesh = meshes[i];

diff --git a/examples/view_immersive.html b/examples/view_immersive.html
@@ -49,13 +49,14 @@
                 animationDuration: 50,
             });
 
+            var cameraThree = view.getThreeJsCamera();
             // limit camera far, to increase performance
-            view.camera.camera3D.far = 10000;
-            view.camera.camera3D.near = 0.1;
+            cameraThree.far = 10000;
+            cameraThree.near = 0.1;
 
             // open camera fov
-            view.camera.camera3D.fov = 75;
-            view.camera.camera3D.updateProjectionMatrix();
+            cameraThree.fov = 75;
+            cameraThree.updateProjectionMatrix();
 
             // disable atmosphere
             view.getLayerById('atmosphere').visible = false;
@@ -175,7 +176,7 @@
 
                 // set camera to current panoramic
                 view.controls.setCameraToCurrentPosition();
-                view.notifyChange(view.camera.camera3D);
+                view.notifyChange(cameraThree);
 
             });
 

diff --git a/examples/view_multi_25d.html b/examples/view_multi_25d.html
@@ -164,13 +164,14 @@
 
             // Since PlanarView doesn't create default controls, we manipulate directly three.js camera
             // Position the camera at south-west corner
-            view.camera.camera3D.position.set(3, 2, 3);
-            view.camera.camera3D.updateMatrixWorld(true);
-            view.camera.camera3D.lookAt(new itowns.THREE.Vector3(0, 0, 0));
+            var cameraThree = view.getThreeJsCamera();
+            cameraThree.position.set(3, 2, 3);
+            cameraThree.updateMatrixWorld(true);
+            cameraThree.lookAt(new itowns.THREE.Vector3(0, 0, 0));
 
-            controls = new itowns.THREE.OrbitControls(view.camera.camera3D, viewerDiv);
+            controls = new itowns.THREE.OrbitControls(cameraThree, viewerDiv);
             controls.minDistance = 1;
-            controls.addEventListener('change', function _() { view.notifyChange(view.camera.camera3D); });
+            controls.addEventListener('change', function _() { view.notifyChange(cameraThree); });
 
             // Request redraw
             view.notifyChange();
-Original file line number
+Diff line change
@@ Expand Up / @@ -128,7 +128,7 @@ const DragNDrop = (function _() { @@
                         }
                         // Move the camera
-                        itowns.CameraUtils.transformCameraToLookAtTarget(_view, _view.camera.camera3D, extent);
+                        itowns.CameraUtils.transformCameraToLookAtTarget(_view, _view.getThreeJsCamera(), extent);
                     });
                 };
@@ Expand Down @@