From 3900c117b70070b508b207bfffce9ca5436f5be1 Mon Sep 17 00:00:00 2001 From: Vincent JAILLOT Date: Mon, 21 Aug 2023 18:44:00 +0200 Subject: [PATCH] feat(View): add getters for threejs renderer and camera Use `View.renderer` to get the threejs renderer of the view Use `View.camera3D` to get the threejs camera of the view --- examples/3dtiles_basic.html | 8 ++-- examples/3dtiles_pointcloud.html | 16 ++++---- examples/effects_postprocessing.html | 2 +- examples/effects_stereo.html | 11 ++--- examples/entwine_simple_loader.html | 10 ++--- examples/itowns-potree.html | 9 ++--- examples/js/OrientedImageHelper.js | 7 ++-- examples/js/plugins/DragNDrop.js | 2 +- examples/laz_dragndrop.html | 10 ++--- examples/misc_camera_animation.html | 2 +- examples/misc_camera_traveling.html | 8 ++-- examples/misc_compare_25d_3d.html | 4 +- examples/misc_georeferenced_images.html | 4 +- examples/potree_25d_map.html | 8 ++-- examples/source_stream_wfs_3d.html | 2 +- examples/view_immersive.html | 10 ++--- examples/view_multi_25d.html | 10 ++--- examples/view_multiglobe.html | 11 ++--- src/Controls/FirstPersonControls.js | 6 +-- src/Controls/FlyControls.js | 2 +- src/Controls/GlobeControls.js | 2 +- src/Controls/PlanarControls.js | 2 +- src/Controls/StreetControls.js | 8 ++-- src/Core/MainLoop.js | 6 +-- src/Core/Picking.js | 6 +-- src/Core/Prefab/Globe/Atmosphere.js | 2 +- src/Core/Prefab/GlobeView.js | 6 +-- src/Core/Prefab/PlanarView.js | 9 ++--- src/Core/View.js | 54 ++++++++++++++++--------- src/Renderer/Camera.js | 6 +-- src/Renderer/c3DEngine.js | 4 +- src/Utils/CameraUtils.js | 2 +- src/Utils/gui/Minimap.js | 25 +++++------- test/functional/3dtiles_ion.js | 2 +- test/functional/CameraUtils.js | 36 ++++++----------- test/functional/GlobeControls.js | 2 +- test/functional/misc_clamp_ground.js | 5 +-- test/functional/view_25d_map.js | 11 +++-- test/hooks_functional.js | 4 +- test/unit/3dtileslayerprocess.js | 2 +- test/unit/globecontrol.js | 6 +-- test/unit/globeview.js | 7 ++-- test/unit/label.js | 4 +- test/unit/planarControls.js | 4 +- test/unit/view.js | 4 +- utils/debug/3dTilesDebug.js | 4 +- utils/debug/Debug.js | 12 +++--- utils/debug/TileDebug.js | 2 +- 48 files changed, 183 insertions(+), 196 deletions(-) diff --git a/examples/3dtiles_basic.html b/examples/3dtiles_basic.html index c03c003dd7..3dff817953 100644 --- a/examples/3dtiles_basic.html +++ b/examples/3dtiles_basic.html @@ -32,7 +32,7 @@ var viewerDiv = document.getElementById('viewerDiv'); var view = new itowns.GlobeView(viewerDiv, placement); - view.camera.camera3D.near = 5; + view.camera3D.near = 5; setupLoadingScreen(viewerDiv, view); var menuGlobe = new GuiTools('menuDiv', view, 300); @@ -84,9 +84,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); + view.camera3D.position.set(1215013.9, -4736315.5, 4081597.5); + view.camera3D.quaternion.set(0.9108514448729665, 0.13456816437801225, 0.1107206134840362, 0.3741416847378546); + view.notifyChange(view.camera3D); } menuGlobe.gui.add(d, 'zoom').name('Go to point cloud'); diff --git a/examples/3dtiles_pointcloud.html b/examples/3dtiles_pointcloud.html index 72d61ecf84..38f4224a38 100644 --- a/examples/3dtiles_pointcloud.html +++ b/examples/3dtiles_pointcloud.html @@ -15,7 +15,7 @@
@@ -27,7 +27,7 @@ diff --git a/examples/effects_postprocessing.html b/examples/effects_postprocessing.html index a4568803e4..b00f52c593 100644 --- 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.camera3D); 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 index dc9cdda2a6..23499c1d92 100644 --- a/examples/effects_stereo.html +++ b/examples/effects_stereo.html @@ -111,7 +111,7 @@ view.render = function render() { r.clear(); - effect.render(view.scene, view.camera.camera3D); + effect.render(view.scene, view.camera3D); }; view.notifyChange(); @@ -125,8 +125,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, view.camera3D); enableEffect(_eff); } @@ -139,8 +138,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, view.camera3D); enableEffect(_eff); } @@ -150,8 +148,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, view.camera3D); enableEffect(_eff); } diff --git a/examples/entwine_simple_loader.html b/examples/entwine_simple_loader.html index 1864d854f5..2951b21bdc 100644 --- a/examples/entwine_simple_loader.html +++ b/examples/entwine_simple_loader.html @@ -43,23 +43,21 @@ var eptLayer, eptSource; function onLayerReady() { - var camera = view.camera.camera3D; - var lookAt = new itowns.THREE.Vector3(); var size = new itowns.THREE.Vector3(); eptLayer.root.bbox.getSize(size); eptLayer.root.bbox.getCenter(lookAt); - camera.far = 2.0 * size.length(); + view.camera3D.far = 2.0 * size.length(); var position = eptLayer.root.bbox.min.clone().add(size.multiply({ x: 0, y: 0, z: size.x / size.z })); - camera.position.copy(position); - camera.lookAt(lookAt); + view.camera3D.position.copy(position); + view.camera3D.lookAt(lookAt); controls.options.moveSpeed = size.length(); - view.notifyChange(camera); + view.notifyChange(view.camera3D); controls.reset(); } diff --git a/examples/itowns-potree.html b/examples/itowns-potree.html index 9c3c5262ee..7672534b74 100644 --- a/examples/itowns-potree.html +++ b/examples/itowns-potree.html @@ -160,9 +160,7 @@ // Controls and camera specific setting. itownsViewer.controls.minDistanceCollision = 0.01; itownsViewer.controls.minDistance = 20; - itownsViewer.camera.camera3D.near = 0.1; - - + view.camera3D.near = 0.1; // ---------- TWEAK ITOWNS VIEWER TO SUPPORT POTREE VISUALIZATION : ---------- @@ -179,9 +177,8 @@ }) // Set Potree viewer camera as iTowns viewer camera. - const camera = itownsViewer.camera.camera3D; - camera.zoomTo = () => {}; - potreeViewer.scene.cameraP = camera; + view.camera3D.zoomTo = () => {}; + potreeViewer.scene.cameraP = view.camera3D; // 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 index bc86c8d236..dd99b82466 100644 --- a/examples/js/OrientedImageHelper.js +++ b/examples/js/OrientedImageHelper.js @@ -93,13 +93,12 @@ function setupViewCameraLookingAtObject(camera, coord, objectToLookAt) { // eslint-disable-next-line no-unused-vars function setupViewCameraDecomposing(view, camera) { let upWorld; - const viewCamera = view.camera.camera3D; - camera.matrixWorld.decompose(viewCamera.position, viewCamera.quaternion, viewCamera.scale); + camera.matrixWorld.decompose(view.camera3D.position, view.camera3D.quaternion, view.camera3D.scale); // setup up vector upWorld = camera.localToWorld(camera.up.clone()); - upWorld = viewCamera.position.clone().sub(upWorld); - viewCamera.up.copy(upWorld); + upWorld = view.camera3D.position.clone().sub(upWorld); + view.camera3D.up.copy(upWorld); } // add a camera helper to debug camera position.. diff --git a/examples/js/plugins/DragNDrop.js b/examples/js/plugins/DragNDrop.js index aeb4ea7bcf..9683d8ea96 100644 --- 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.camera3D, extent); }); }; diff --git a/examples/laz_dragndrop.html b/examples/laz_dragndrop.html index e82e784a83..369b940ac9 100644 --- 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); + view.camera3D.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); + view.camera3D.position.copy(position); + view.camera3D.lookAt(lookAt); controls.options.moveSpeed = size.length(); - view.notifyChange(camera); + view.notifyChange(view.camera3D); controls.reset(); }); }; diff --git a/examples/misc_camera_animation.html b/examples/misc_camera_animation.html index c3c4eda405..19fe727a13 100644 --- 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.camera3D, pathTravel); } diff --git a/examples/misc_camera_traveling.html b/examples/misc_camera_traveling.html index 156ad31e27..3e4c57821f 100644 --- a/examples/misc_camera_traveling.html +++ b/examples/misc_camera_traveling.html @@ -89,7 +89,7 @@ // Retrieve current camera transform options const cameraTransformOptions = itowns.CameraUtils.getTransformCameraLookingAtTarget( view, - view.camera.camera3D, + view.camera3D, ); // Change default easing parameter for animation speed // (see https://sole.github.io/tween.js/examples/03_graphs.html) @@ -101,7 +101,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 = view.camera3D.clone(); copyCamera.far = 50; const helper = new itowns.THREE.CameraHelper(copyCamera); helper.updateWorldMatrix(true, false); @@ -114,12 +114,12 @@ travelOn = true; return itowns.CameraUtils.sequenceAnimationsToLookAtTarget( view, - view.camera.camera3D, + view.camera3D, travelSteps, ).then(() => { travelOn = false; }); } - itowns.CameraUtils.stop(view, view.camera.camera3D); // If travel is on, interrupt it + itowns.CameraUtils.stop(view, view.camera3D); // 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 index 469e31ba3d..35ce1658eb 100644 --- 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.camera3D; + var globeCamera = view.camera3D; 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 index 02627efbab..dd9b112ff9 100644 --- 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.camera3D.fov += 10; + view.camera3D.updateProjectionMatrix(); // uncomment to debug camera // addCameraHelper(view, camera); diff --git a/examples/potree_25d_map.html b/examples/potree_25d_map.html index 7bd87a7fff..1be0029a7e 100644 --- a/examples/potree_25d_map.html +++ b/examples/potree_25d_map.html @@ -83,13 +83,13 @@ view.domElement.addEventListener('dblclick', dblClickHandler); function placeCamera(position, lookAt) { - view.camera.camera3D.position.copy(position); - view.camera.camera3D.lookAt(lookAt); + view.camera3D.position.copy(position); + view.camera3D.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(view.camera3D); } // add potreeLayer to scene @@ -104,7 +104,7 @@ debug.PotreeDebug.initTools(view, potreeLayer, debugGui); - view.camera.camera3D.far = 2.0 * size.length(); + view.camera3D.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 index caba39e13a..acc4ba88c2 100644 --- 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.camera3D, true); } for (i = 0; i < meshes.length; i++) { mesh = meshes[i]; diff --git a/examples/view_immersive.html b/examples/view_immersive.html index ff03e8dc98..4757f57d0d 100644 --- a/examples/view_immersive.html +++ b/examples/view_immersive.html @@ -50,12 +50,12 @@ }); // limit camera far, to increase performance - view.camera.camera3D.far = 10000; - view.camera.camera3D.near = 0.1; + view.camera3D.far = 10000; + view.camera3D.near = 0.1; // open camera fov - view.camera.camera3D.fov = 75; - view.camera.camera3D.updateProjectionMatrix(); + view.camera3D.fov = 75; + view.camera3D.updateProjectionMatrix(); // disable atmosphere view.getLayerById('atmosphere').visible = false; @@ -175,7 +175,7 @@ // set camera to current panoramic view.controls.setCameraToCurrentPosition(); - view.notifyChange(view.camera.camera3D); + view.notifyChange(view.camera3D); }); diff --git a/examples/view_multi_25d.html b/examples/view_multi_25d.html index f3b1f2d494..9e807f087a 100644 --- a/examples/view_multi_25d.html +++ b/examples/view_multi_25d.html @@ -164,13 +164,13 @@ // 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)); + view.camera3D.position.set(3, 2, 3); + view.camera3D.updateMatrixWorld(true); + view.camera3D.lookAt(new itowns.THREE.Vector3(0, 0, 0)); - controls = new itowns.THREE.OrbitControls(view.camera.camera3D, viewerDiv); + controls = new itowns.THREE.OrbitControls(view.camera3D, viewerDiv); controls.minDistance = 1; - controls.addEventListener('change', function _() { view.notifyChange(view.camera.camera3D); }); + controls.addEventListener('change', function _() { view.notifyChange(view.camera3D); }); // Request redraw view.notifyChange(); diff --git a/examples/view_multiglobe.html b/examples/view_multiglobe.html index 37a2cdeefa..274263d38a 100644 --- a/examples/view_multiglobe.html +++ b/examples/view_multiglobe.html @@ -44,6 +44,7 @@ // Create the first globe object3d = new itowns.THREE.Object3D(); var view = new itowns.GlobeView(viewerDiv, placement, { noControls: true, object3d }); + var cameraThree = view.camera3D; setupLoadingScreen(viewerDiv, view); object3ds.push(object3d); @@ -97,7 +98,7 @@ if (t < 1) { // animation is not finished, schedule a new view update - view.notifyChange(view.camera.camera3D); + view.notifyChange(cameraThree); } else { // animation is finished, remove the frame requester view.removeFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, animator); @@ -111,7 +112,7 @@ t = 0; // schedule the animation view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, animator); - view.notifyChange(view.camera.camera3D); + view.notifyChange(cameraThree); } } viewerDiv.focus(); @@ -119,7 +120,7 @@ // Zoom on mouse-wheel var onMouseWheel = function onMouseWheel(event) { - var geo = new itowns.Coordinates('EPSG:4978', view.camera.camera3D.position).as('EPSG:4326'); + var geo = new itowns.Coordinates('EPSG:4978', cameraThree.position).as('EPSG:4326'); // WebKit / Opera / Explorer 9 if (event.wheelDelta !== undefined) { delta = event.wheelDelta; @@ -133,8 +134,8 @@ } else { geo.altitude *= 1.1; } - view.camera.camera3D.position.copy(geo.as('EPSG:4978')); - view.notifyChange(view.camera.camera3D); + cameraThree.position.copy(geo.as('EPSG:4978')); + view.notifyChange(cameraThree); }; viewerDiv.addEventListener('DOMMouseScroll', onMouseWheel); viewerDiv.addEventListener('mousewheel', onMouseWheel); diff --git a/src/Controls/FirstPersonControls.js b/src/Controls/FirstPersonControls.js index 9afed9789f..18c24cb168 100644 --- a/src/Controls/FirstPersonControls.js +++ b/src/Controls/FirstPersonControls.js @@ -18,7 +18,7 @@ function applyRotation(view, camera3D, state) { camera3D.rotateY(state.rotateY); camera3D.rotateX(state.rotateX); - view.notifyChange(view.camera.camera3D); + view.notifyChange(view.camera3D); } const MOVEMENTS = { @@ -63,7 +63,7 @@ class FirstPersonControls extends THREE.EventDispatcher { constructor(view, options = {}) { super(); this.isFirstPersonControls = true; - this.camera = view.camera.camera3D; + this.camera = view.camera3D; this.view = view; this.moves = new Set(); if (options.panoramaRatio) { @@ -191,7 +191,7 @@ class FirstPersonControls extends THREE.EventDispatcher { } if (this.moves.size) { - this.view.notifyChange(this.view.camera.camera3D); + this.view.notifyChange(this.camera); } } diff --git a/src/Controls/FlyControls.js b/src/Controls/FlyControls.js index 58fc680534..ff623401b0 100644 --- a/src/Controls/FlyControls.js +++ b/src/Controls/FlyControls.js @@ -100,7 +100,7 @@ class FlyControls extends THREE.EventDispatcher { super(); this.view = view; this.options = options; - this._camera3D = view.camera.camera3D; + this._camera3D = view.camera3D; this.moves = new Set(); this.moveSpeed = 10; // backward or forward move speed in m/s diff --git a/src/Controls/GlobeControls.js b/src/Controls/GlobeControls.js index 92ed664356..d707fc2d29 100644 --- a/src/Controls/GlobeControls.js +++ b/src/Controls/GlobeControls.js @@ -186,7 +186,7 @@ class GlobeControls extends THREE.EventDispatcher { super(); this.player = new AnimationPlayer(); this.view = view; - this.camera = view.camera.camera3D; + this.camera = view.camera3D; // State control this.states = new StateControl(this.view); diff --git a/src/Controls/PlanarControls.js b/src/Controls/PlanarControls.js index 29d4ab3134..9c867be539 100644 --- a/src/Controls/PlanarControls.js +++ b/src/Controls/PlanarControls.js @@ -173,7 +173,7 @@ class PlanarControls extends THREE.EventDispatcher { constructor(view, options = {}) { super(); this.view = view; - this.camera = view.camera.camera3D; + this.camera = view.camera3D; // Set to false to disable this control this.enabled = typeof options.enabled == 'boolean' ? options.enabled : defaultOptions.enabled; diff --git a/src/Controls/StreetControls.js b/src/Controls/StreetControls.js index 48ad942ff2..3ba17b6d10 100644 --- a/src/Controls/StreetControls.js +++ b/src/Controls/StreetControls.js @@ -39,7 +39,7 @@ const startQuaternion = new THREE.Quaternion(); function pick(event, view, buildingsLayer, pickGround = () => {}, pickObject = () => {}, pickNothing = () => {}) { // get real distance to ground, with a specific method to pick on the elevation layer view.getPickingPositionFromDepth(view.eventToViewCoords(event), target); - const distanceToGround = view.camera.camera3D.position.distanceTo(target); + const distanceToGround = view.camera3D.position.distanceTo(target); // pick on building layer const buildings = buildingsLayer ? view.pickObjectsAt(event, -1, buildingsLayer) : []; @@ -51,7 +51,7 @@ function pick(event, view, buildingsLayer, pickGround = () => {}, pickObject = ( normal.copy(buildings[0].face.normal).applyNormalMatrix(normalMatrix); pickObject(buildings[0].point, normal); } else if (view.tileLayer) { - const far = view.camera.camera3D.far * 0.95; + const far = view.camera3D.far * 0.95; if (distanceToGround < far) { // compute normal if (view.tileLayer.isGlobeLayer) { @@ -395,12 +395,12 @@ class StreetControls extends FirstPersonControls { // key to set to camera to current position looking at next position (default to A) if (e.keyCode == this.keySetCameraToCurrentPositionAndLookAtNext) { this.setCameraToCurrentPosition(); - this.view.notifyChange(this.view.camera.camera3D); + this.view.notifyChange(this.view.camera3D); } // key to set to camera to current position looking at previous position (default to Q) if (e.keyCode == this.keySetCameraToCurrentPositionAndLookAtPrevious) { this.setCameraToCurrentPosition(true); - this.view.notifyChange(this.view.camera.camera3D); + this.view.notifyChange(this.view.camera3D); } } diff --git a/src/Core/MainLoop.js b/src/Core/MainLoop.js index 6f18352a52..ac1fdc30e9 100644 --- a/src/Core/MainLoop.js +++ b/src/Core/MainLoop.js @@ -193,8 +193,8 @@ class MainLoop extends EventDispatcher { // camera matrixWorld. // Note: this is required at least because WEBGLRenderer calls // camera.updateMatrixWorld() - const oldAutoUpdate = view.camera.camera3D.matrixAutoUpdate; - view.camera.camera3D.matrixAutoUpdate = false; + const oldAutoUpdate = view.camera3D.matrixAutoUpdate; + view.camera3D.matrixAutoUpdate = false; // update data-structure this.#update(view, updateSources, dt); @@ -219,7 +219,7 @@ class MainLoop extends EventDispatcher { document.title = document.title.substr(0, document.title.length - 2); } - view.camera.camera3D.matrixAutoUpdate = oldAutoUpdate; + view.camera3D.matrixAutoUpdate = oldAutoUpdate; view.execFrameRequesters(MAIN_LOOP_EVENTS.UPDATE_END, dt, this.#updateLoopRestarted); } diff --git a/src/Core/Picking.js b/src/Core/Picking.js index 54612514d2..9de491370c 100644 --- a/src/Core/Picking.js +++ b/src/Core/Picking.js @@ -179,7 +179,7 @@ export default { // Compute distance to the camera pointPosCoord.setCrs(view.referenceCrs); pointPosCoord.setFromVector3(pointPos); - view.camera.camera3D.getWorldPosition(cameraPos); + view.camera3D.getWorldPosition(cameraPos); cameraPosCoord.setCrs(view.referenceCrs); cameraPosCoord.setFromVector3(cameraPos); const dist = pointPosCoord.spatialEuclideanDistanceTo(cameraPosCoord); @@ -205,7 +205,7 @@ export default { // Raycaster use NDC coordinate view.viewToNormalizedCoords(viewCoords, normalized); if (radius < 0) { - raycaster.setFromCamera(normalized, view.camera.camera3D); + raycaster.setFromCamera(normalized, view.camera3D); const intersects = raycaster.intersectObject(object, true); for (const inter of intersects) { @@ -260,7 +260,7 @@ export default { .setY(normalized.y + y / view.camera.height); raycaster.setFromCamera( tmp, - view.camera.camera3D); + view.camera3D); const intersects = raycaster.intersectObject(object, true); for (const inter of intersects) { diff --git a/src/Core/Prefab/Globe/Atmosphere.js b/src/Core/Prefab/Globe/Atmosphere.js index 05d21a1aa1..347b3a494d 100644 --- a/src/Core/Prefab/Globe/Atmosphere.js +++ b/src/Core/Prefab/Globe/Atmosphere.js @@ -147,7 +147,7 @@ class Atmosphere extends GeometryLayer { // eslint-disable-next-line no-unused-vars preUpdate(context, srcs) { - const cameraPosition = context.view.camera.camera3D.position; + const cameraPosition = context.view.camera3D.position; if (this.fog.enable) { v.setFromMatrixPosition(context.view.tileLayer.object3d.matrixWorld); const len = v.distanceTo(cameraPosition); diff --git a/src/Core/Prefab/GlobeView.js b/src/Core/Prefab/GlobeView.js index 2b891756ad..d4f55ea87c 100644 --- a/src/Core/Prefab/GlobeView.js +++ b/src/Core/Prefab/GlobeView.js @@ -99,8 +99,8 @@ class GlobeView extends View { super('EPSG:4978', viewerDiv, options); this.isGlobeView = true; - this.camera.camera3D.near = Math.max(15.0, 0.000002352 * ellipsoidSizes.x); - this.camera.camera3D.far = ellipsoidSizes.x * 10; + this.camera3D.near = Math.max(15.0, 0.000002352 * ellipsoidSizes.x); + this.camera3D.far = ellipsoidSizes.x * 10; const tileLayer = new GlobeLayer('globe', options.object3d, options); this.mainLoop.gfxEngine.label2dRenderer.infoTileLayer = tileLayer.info; @@ -121,7 +121,7 @@ class GlobeView extends View { } if (options.noControls) { - CameraUtils.transformCameraToLookAtTarget(this, this.camera.camera3D, placement); + CameraUtils.transformCameraToLookAtTarget(this, this.camera3D, placement); } else { this.controls = new GlobeControls(this, placement, options.controls); this.controls.handleCollision = typeof (options.handleCollision) !== 'undefined' ? options.handleCollision : true; diff --git a/src/Core/Prefab/PlanarView.js b/src/Core/Prefab/PlanarView.js index f9f1bbcd15..d4a85ecbae 100644 --- a/src/Core/Prefab/PlanarView.js +++ b/src/Core/Prefab/PlanarView.js @@ -42,10 +42,9 @@ class PlanarView extends View { // Configure camera const dim = extent.planarDimensions(); const max = Math.max(dim.x, dim.y); - const camera3D = this.camera.camera3D; - camera3D.near = 0.1; - camera3D.far = camera3D.isOrthographicCamera ? 2000 : 2 * max; - camera3D.updateProjectionMatrix(); + this.camera3D.near = 0.1; + this.camera3D.far = this.camera3D.isOrthographicCamera ? 2000 : 2 * max; + this.camera3D.updateProjectionMatrix(); const tileLayer = new PlanarLayer('planar', extent, options.object3d, options); this.mainLoop.gfxEngine.label2dRenderer.infoTileLayer = tileLayer.info; @@ -60,7 +59,7 @@ class PlanarView extends View { placement.heading = placement.heading || 0; placement.range = placement.range || max; } - CameraUtils.transformCameraToLookAtTarget(this, camera3D, placement); + CameraUtils.transformCameraToLookAtTarget(this, this.camera3D, placement); if (!options.noControls) { this.controls = new PlanarControls(this, options.controls); diff --git a/src/Core/View.js b/src/Core/View.js index f10f53df2f..f1d8dbc20d 100644 --- a/src/Core/View.js +++ b/src/Core/View.js @@ -114,6 +114,9 @@ const viewers = []; // Size of the camera frustrum, in meters let screenMeters; +/** + * + */ class View extends THREE.EventDispatcher { #layers = []; #pixelDepthBuffer = new Uint8Array(4); @@ -129,7 +132,7 @@ class View extends THREE.EventDispatcher { * @example Create a view with an orthographic camera, and grant it with Three.js custom controls. * var viewerDiv = document.getElementById('viewerDiv'); * var view = itowns.View('EPSG:4326', viewerDiv, { camera: { type: itowns.CAMERA_TYPE.ORTHOGRAPHIC } }); - * var customControls = itowns.THREE.OrbitControls(view.camera.camera3D, viewerDiv); + * var customControls = itowns.THREE.OrbitControls(view.camera3D, viewerDiv); * * @example Enable WebGl 1.0 instead of WebGl 2.0. * var viewerDiv = document.getElementById('viewerDiv'); @@ -247,6 +250,22 @@ class View extends THREE.EventDispatcher { viewers.push(this); } + /** + * Get the Threejs renderer used to render this view. + * @returns {THREE.WebGLRenderer} the WebGLRenderer used to render this view. + */ + get renderer() { + return this.mainLoop?.gfxEngine?.getRenderer(); + } + + /** + * Get the threejs Camera of this view + * @returns {THREE.Camera} the threejs camera of this view + */ + get camera3D() { + return this.camera?.camera3D; + } + /** * Dispose viewer before delete it. * @@ -331,7 +350,7 @@ class View extends THREE.EventDispatcher { return layer._reject(new Error(`Cant add color layer ${layer.id}: the maximum layer is reached`)); } } else if (layer.isElevationLayer && layer.source.format == 'image/x-bil;bits=32') { - layer.source.networkOptions.isWebGL2 = this.mainLoop.gfxEngine.renderer.capabilities.isWebGL2; + layer.source.networkOptions.isWebGL2 = this.renderer?.capabilities?.isWebGL2; parentLayer.attach(layer); } else { parentLayer.attach(layer); @@ -764,7 +783,7 @@ class View extends THREE.EventDispatcher { * @return {number} The zoom scale. */ getScale(pitch = 0.28) { - if (this.camera.camera3D.isOrthographicCamera) { + if (this.camera3D.isOrthographicCamera) { return pitch * 1E-3 / this.getPixelsToMeters(); } return this.getScaleFromDistance(pitch, this.getDistanceFromCamera()); @@ -772,7 +791,7 @@ class View extends THREE.EventDispatcher { getScaleFromDistance(pitch = 0.28, distance = 1) { pitch /= 1000; - const fov = THREE.MathUtils.degToRad(this.camera.camera3D.fov); + const fov = THREE.MathUtils.degToRad(this.camera3D.fov); const unit = this.camera.height / (2 * distance * Math.tan(fov * 0.5)); return pitch * unit; } @@ -788,7 +807,7 @@ class View extends THREE.EventDispatcher { */ getDistanceFromCamera(screenCoord) { this.getPickingPositionFromDepth(screenCoord, positionVector); - return this.camera.camera3D.position.distanceTo(positionVector); + return this.camera3D.position.distanceTo(positionVector); } /** @@ -802,8 +821,8 @@ class View extends THREE.EventDispatcher { * @return {number} The projected distance in meters. */ getPixelsToMeters(pixels = 1, screenCoord) { - if (this.camera.camera3D.isOrthographicCamera) { - screenMeters = (this.camera.camera3D.right - this.camera.camera3D.left) / this.camera.camera3D.zoom; + if (this.camera3D.isOrthographicCamera) { + screenMeters = (this.camera3D.right - this.camera3D.left) / this.camera3D.zoom; return pixels * screenMeters / this.camera.width; } return this.getPixelsToMetersFromDistance(pixels, this.getDistanceFromCamera(screenCoord)); @@ -824,8 +843,8 @@ class View extends THREE.EventDispatcher { * @return {number} The projected distance in pixels. */ getMetersToPixels(meters = 1, screenCoord) { - if (this.camera.camera3D.isOrthographicCamera) { - screenMeters = (this.camera.camera3D.right - this.camera.camera3D.left) / this.camera.camera3D.zoom; + if (this.camera3D.isOrthographicCamera) { + screenMeters = (this.camera3D.right - this.camera3D.left) / this.camera3D.zoom; return meters * this.camera.width / screenMeters; } return this.getMetersToPixelsFromDistance(meters, this.getDistanceFromCamera(screenCoord)); @@ -995,7 +1014,6 @@ class View extends THREE.EventDispatcher { const viewPaused = l.scheduler.commandsWaitingExecutionCount() == 0 && l.renderingState == RENDERING_PAUSED; const g = l.gfxEngine; const dim = g.getWindowSize(); - const camera = this.camera.camera3D; mouse = mouse || dim.clone().multiplyScalar(0.5); mouse.x = Math.floor(mouse.x); @@ -1017,15 +1035,15 @@ class View extends THREE.EventDispatcher { screen.x = (mouse.x / dim.x) * 2 - 1; screen.y = -(mouse.y / dim.y) * 2 + 1; - if (Capabilities.isLogDepthBufferSupported() && camera.type == 'PerspectiveCamera') { + if (Capabilities.isLogDepthBufferSupported() && this.camera3D.type == 'PerspectiveCamera') { // TODO: solve this part with gl_FragCoord_Z and unproject // Origin - ray.origin.copy(camera.position); + ray.origin.copy(this.camera3D.position); // Direction ray.direction.set(screen.x, screen.y, 0.5); // Unproject - matrix.multiplyMatrices(camera.matrixWorld, matrix.copy(camera.projectionMatrix).invert()); + matrix.multiplyMatrices(this.camera3D.matrixWorld, matrix.copy(this.camera3D.projectionMatrix).invert()); ray.direction.applyMatrix4(matrix); ray.direction.sub(ray.origin); @@ -1034,14 +1052,14 @@ class View extends THREE.EventDispatcher { direction.sub(ray.origin); const angle = direction.angleTo(ray.direction); - const orthoZ = g.depthBufferRGBAValueToOrthoZ(buffer, camera); + const orthoZ = g.depthBufferRGBAValueToOrthoZ(buffer, this.camera3D); const length = orthoZ / Math.cos(angle); - target.addVectors(camera.position, ray.direction.setLength(length)); + target.addVectors(this.camera3D.position, ray.direction.setLength(length)); } else { - const gl_FragCoord_Z = g.depthBufferRGBAValueToOrthoZ(buffer, camera); + const gl_FragCoord_Z = g.depthBufferRGBAValueToOrthoZ(buffer, this.camera3D); target.set(screen.x, screen.y, gl_FragCoord_Z); - target.unproject(camera); + target.unproject(this.camera3D); } if (target.length() > 10000000) { return undefined; } @@ -1127,7 +1145,7 @@ class View extends THREE.EventDispatcher { this.mainLoop.gfxEngine.onWindowResize(width, height); if (width !== 0 && height !== 0) { this.camera.resize(width, height); - this.notifyChange(this.camera.camera3D); + this.notifyChange(this.camera3D); } } } diff --git a/src/Renderer/Camera.js b/src/Renderer/Camera.js index a580973376..848936cf2b 100644 --- a/src/Renderer/Camera.js +++ b/src/Renderer/Camera.js @@ -76,7 +76,7 @@ function updatePreSse(camera, height, fov) { * Wrapper around Three.js camera to expose some geographic helpers. * * @property {string} crs The camera's coordinate projection system. - * @property {object} camera3D The Three.js camera that is wrapped around. + * @property {THREE.Camera} camera3D The Three.js camera that is wrapped around. * @property {number} width The width of the camera. * @property {number} height The height of the camera. * @property {number} _preSSE The precomputed constant part of the screen space error. @@ -91,7 +91,7 @@ class Camera { * camera is associated to. * @param {number} height The height (in pixels) of the view the * camera is associated to. - * @param {object} [options] Options for the camera. + * @param {Object} [options] Options for the camera. * @param {THREE.Camera} [options.cameraThree] A custom Three.js camera object to wrap * around. * @param {Camera~CAMERA_TYPE} [options.type=CAMERA_TYPE.PERSPECTIVE] The type of the camera. See {@link @@ -259,7 +259,7 @@ class Camera { // We move the camera to avoid collision if too close to terrain if (difElevation < 0) { camLocation.altitude = elevationUnderCamera + minDistanceCollision; - view.camera.camera3D.position.copy(camLocation.as(view.referenceCrs)); + view.camera3D.position.copy(camLocation.as(view.referenceCrs)); view.notifyChange(this.camera3D); } } diff --git a/src/Renderer/c3DEngine.js b/src/Renderer/c3DEngine.js index 669a0cc1ad..0d0e2c37f5 100644 --- a/src/Renderer/c3DEngine.js +++ b/src/Renderer/c3DEngine.js @@ -58,9 +58,9 @@ class c3DEngine { this.renderView = function _(view) { this.renderer.clear(); - this.renderer.render(view.scene, view.camera.camera3D); + this.renderer.render(view.scene, view.camera3D); if (view.tileLayer) { - this.label2dRenderer.render(view.tileLayer.object3d, view.camera.camera3D); + this.label2dRenderer.render(view.tileLayer.object3d, view.camera3D); } }.bind(this); diff --git a/src/Utils/CameraUtils.js b/src/Utils/CameraUtils.js index 63ecc90607..308be31f4e 100644 --- a/src/Utils/CameraUtils.js +++ b/src/Utils/CameraUtils.js @@ -417,7 +417,7 @@ export default { * Compute the CameraTransformOptions that allow a given camera to display a given extent in its entirety. * * @param {View} view The camera view - * @param {Camera} camera The camera to get the CameraTransformOptions from + * @param {THREE.Camera} camera The camera to get the CameraTransformOptions from * @param {Extent} extent The extent the camera must display * * @return {CameraUtils~CameraTransformOptions} The CameraTransformOptions allowing camera to display the extent. diff --git a/src/Utils/gui/Minimap.js b/src/Utils/gui/Minimap.js index f7a223f96f..a88c6b3572 100644 --- a/src/Utils/gui/Minimap.js +++ b/src/Utils/gui/Minimap.js @@ -129,17 +129,12 @@ class Minimap extends Widget { event.preventDefault(); }); - // Store minimap view camera3D in constant for code convenience. - const camera3D = this.view.camera.camera3D; - - - // ---------- UPDATE MINIMAP VIEW WHEN UPDATING THE MAIN VIEW : ---------- // The minimal and maximal value the minimap camera3D zoom can reach in order to stay in the scale limits. const initialScale = this.view.getScale(options.pitch); - const minZoom = camera3D.zoom * this.maxScale / initialScale; - const maxZoom = camera3D.zoom * this.minScale / initialScale; + const minZoom = this.view.camera3D.zoom * this.maxScale / initialScale; + const maxZoom = this.view.camera3D.zoom * this.minScale / initialScale; // Coordinates used to transform position vectors from the main view CRS to the minimap view CRS. const mainViewCoordinates = new Coordinates(view.referenceCrs); @@ -149,21 +144,21 @@ class Minimap extends Widget { view.addFrameRequester(MAIN_LOOP_EVENTS.AFTER_RENDER, () => { // Update minimap camera zoom - const distance = view.camera.camera3D.position.distanceTo(targetPosition); + const distance = view.camera3D.position.distanceTo(targetPosition); const scale = view.getScaleFromDistance(options.pitch, distance); - camera3D.zoom = this.zoomRatio * maxZoom * scale / this.minScale; - camera3D.zoom = Math.min(Math.max(camera3D.zoom, minZoom), maxZoom); - camera3D.updateProjectionMatrix(); + this.view.camera3D.zoom = this.zoomRatio * maxZoom * scale / this.minScale; + this.view.camera3D.zoom = Math.min(Math.max(this.view.camera3D.zoom, minZoom), maxZoom); + this.view.camera3D.updateProjectionMatrix(); // Update minimap camera position. mainViewCoordinates.setFromVector3(view.controls.getCameraTargetPosition()); mainViewCoordinates.as(this.view.referenceCrs, viewCoordinates); - camera3D.position.x = viewCoordinates.x; - camera3D.position.y = viewCoordinates.y; - camera3D.updateMatrixWorld(true); + this.view.camera3D.position.x = viewCoordinates.x; + this.view.camera3D.position.y = viewCoordinates.y; + this.view.camera3D.updateMatrixWorld(true); - this.view.notifyChange(camera3D); + this.view.notifyChange(this.view.camera3D); }); } } diff --git a/test/functional/3dtiles_ion.js b/test/functional/3dtiles_ion.js index ff178815ac..b45186dac3 100644 --- a/test/functional/3dtiles_ion.js +++ b/test/functional/3dtiles_ion.js @@ -24,7 +24,7 @@ describe('3dtiles_ion', function _() { it('should pick a building from 3D', async () => { await page.evaluate(() => { const lyonExtent = new itowns.Extent('EPSG:4326', 4.85, 4.9, 45.75, 45.77); - itowns.CameraUtils.transformCameraToLookAtTarget(view, view.camera.camera3D, lyonExtent); + itowns.CameraUtils.transformCameraToLookAtTarget(view, view.camera3D, lyonExtent); }); await waitUntilItownsIsIdle(this.fullTitle()); const layers = await page.evaluate( diff --git a/test/functional/CameraUtils.js b/test/functional/CameraUtils.js index 044961f01a..3914db0603 100644 --- a/test/functional/CameraUtils.js +++ b/test/functional/CameraUtils.js @@ -28,12 +28,9 @@ describe('Camera utils with globe example', function _() { it('should set range like expected', async () => { const params = { range: 10000 }; - const result = await page.evaluate((p) => { - const camera = view.camera.camera3D; - return itowns.CameraUtils.transformCameraToLookAtTarget( - view, camera, p, - ).then(final => final.range); - }, params); + const result = await page.evaluate(p => itowns.CameraUtils.transformCameraToLookAtTarget( + view, view.camera3D, p, + ).then(final => final.range), params); assert.ok(Math.abs(result - params.range) / params.range < 0.05); }); @@ -41,9 +38,8 @@ describe('Camera utils with globe example', function _() { const params = { longitude: 60, latitude: 40 }; const result = await page.evaluate((p) => { const coord = new itowns.Coordinates('EPSG:4326', p.longitude, p.latitude, 0); - const camera = view.camera.camera3D; return itowns.CameraUtils.transformCameraToLookAtTarget( - view, camera, { coord }, + view, view.camera3D, { coord }, ).then(final => final.coord); }, params); assert.equal(Math.round(result.x), params.longitude); @@ -52,29 +48,22 @@ describe('Camera utils with globe example', function _() { it('should tilt like expected', async () => { const params = { tilt: 50 }; - const result = await page.evaluate((p) => { - const camera = view.camera.camera3D; - return itowns.CameraUtils.transformCameraToLookAtTarget( - view, camera, p, - ).then(final => final.tilt); - }, params); + const result = await page.evaluate(p => itowns.CameraUtils.transformCameraToLookAtTarget( + view, view.camera3D, p, + ).then(final => final.tilt), params); assert.equal(Math.round(result), params.tilt); }); it('should heading like expected', async () => { const params = { heading: 170 }; - const result = await page.evaluate((p) => { - const camera = view.camera.camera3D; - return itowns.CameraUtils.transformCameraToLookAtTarget( - view, camera, p, - ).then(final => final.heading); - }, params); + const result = await page.evaluate(p => itowns.CameraUtils.transformCameraToLookAtTarget( + view, view.camera3D, p, + ).then(final => final.heading), params); assert.equal(Math.round(result), params.heading); }); it('should heading, tilt, range and coordinate like expected', async () => { const result = await page.evaluate(() => { - const camera = view.camera.camera3D; const params = { heading: 17, tilt: 44, @@ -84,7 +73,7 @@ describe('Camera utils with globe example', function _() { coord: new itowns.Coordinates('EPSG:4326', 3, 47, 0), }; return itowns.CameraUtils.transformCameraToLookAtTarget( - view, camera, params, + view, view.camera3D, params, ).then(final => ({ params, final })); }); assert.equal(Math.round(result.final.heading), result.params.heading); @@ -105,9 +94,8 @@ describe('Camera utils with globe example', function _() { coord: new itowns.Coordinates('EPSG:4326', 3, 47, 0), time: 500, }; - const camera = view.camera.camera3D; return itowns.CameraUtils - .animateCameraToLookAtTarget(view, camera, params) + .animateCameraToLookAtTarget(view, view.camera3D, params) .then(final => ({ final, params })); }); assert.equal(Math.round(result.final.heading), result.params.heading); diff --git a/test/functional/GlobeControls.js b/test/functional/GlobeControls.js index c1cb29cb45..f51f0b499f 100644 --- a/test/functional/GlobeControls.js +++ b/test/functional/GlobeControls.js @@ -21,7 +21,7 @@ describe('GlobeControls with globe example', function _() { screen.y = Math.floor(screen.y); screen.x = ((screen.x / dim.x) * 2) - 1; screen.y = (-(screen.y / dim.y) * 2) + 1; - raycaster.setFromCamera(screen, view.camera.camera3D); + raycaster.setFromCamera(screen, view.camera3D); target.copy(ellipsoid.intersection(raycaster.ray)); return target; diff --git a/test/functional/misc_clamp_ground.js b/test/functional/misc_clamp_ground.js index db0e5bd626..f673259431 100644 --- a/test/functional/misc_clamp_ground.js +++ b/test/functional/misc_clamp_ground.js @@ -31,8 +31,7 @@ describe('misc_clamp_ground', function _() { const coneCenter = new itowns.THREE.Vector3(0, 0, 0) .applyMatrix4(view.mesh.matrixWorld); - const camera3D = view.camera.camera3D; - const viewMatrix = new itowns.THREE.Matrix4().multiplyMatrices(camera3D.projectionMatrix, camera3D.matrixWorldInverse); + const viewMatrix = new itowns.THREE.Matrix4().multiplyMatrices(view.camera3D.projectionMatrix, view.camera3D.matrixWorldInverse); coneCenter.applyMatrix4(viewMatrix); const mouse = view.normalizedToViewCoords(coneCenter); @@ -67,7 +66,7 @@ describe('misc_clamp_ground', function _() { // get range with depth buffer const depthMethod = await page.evaluate(() => view - .getPickingPositionFromDepth().distanceTo(view.camera.camera3D.position)); + .getPickingPositionFromDepth().distanceTo(view.camera3D.position)); assert.ok(Math.abs(controlsMethod - destRange) / destRange < 0.002); assert.ok(Math.abs(depthMethod - destRange) / destRange < 0.002); diff --git a/test/functional/view_25d_map.js b/test/functional/view_25d_map.js index 82704ce296..8493b17d46 100644 --- a/test/functional/view_25d_map.js +++ b/test/functional/view_25d_map.js @@ -33,18 +33,17 @@ describe('view_25d_map', function _() { // get range with depth buffer and altitude await page.evaluate((l) => { const lookat = extent.center().toVector3(); - - view.camera.camera3D.position.copy(lookat); - view.camera.camera3D.position.z = l; - view.camera.camera3D.lookAt(lookat); - view.notifyChange(view.camera.camera3D, true); + view.camera3D.position.copy(lookat); + view.camera3D.position.z = l; + view.camera3D.lookAt(lookat); + view.notifyChange(view.camera3D, true); }, length); await waitUntilItownsIsIdle(this.test.fullTitle()); result = await page.evaluate(() => { const depthMethod = view - .getPickingPositionFromDepth().distanceTo(view.camera.camera3D.position); + .getPickingPositionFromDepth().distanceTo(view.camera3D.position); const altitude = itowns.DEMUtils .getElevationValueAt(view.tileLayer, extent.center().clone()); diff --git a/test/hooks_functional.js b/test/hooks_functional.js index 84936c0928..b422db5b82 100644 --- a/test/hooks_functional.js +++ b/test/hooks_functional.js @@ -127,7 +127,7 @@ const loadExample = async (url, screenshotName) => { } catch (e) { if (e instanceof TimeoutError) { await page.evaluate(() => { - itowns.CameraUtils.stop(view, view.camera.camera3D); + itowns.CameraUtils.stop(view, view.camera3D); }); await layersAreInitialized(); } @@ -146,7 +146,7 @@ const waitUntilItownsIsIdle = async (screenshotName) => { function resolveWhenReady() { if (view.mainLoop.renderingState === 0) { view.mainLoop.removeEventListener('command-queue-empty', resolveWhenReady); - itowns.CameraUtils.stop(view, view.camera.camera3D); + itowns.CameraUtils.stop(view, view.camera3D()); resolve(true); } } diff --git a/test/unit/3dtileslayerprocess.js b/test/unit/3dtileslayerprocess.js index 5d6c234029..a0149b1509 100644 --- a/test/unit/3dtileslayerprocess.js +++ b/test/unit/3dtileslayerprocess.js @@ -43,7 +43,7 @@ describe('3Dtiles layer', function () { }); it('update 3dtiles layer', function () { const node = threedTilesLayer.root; - viewer.camera.camera3D.updateMatrixWorld(); + viewer.camera3D.updateMatrixWorld(); threedTilesLayer.update(context, threedTilesLayer, node); assert.ok(node.pendingSubdivision); }); diff --git a/test/unit/globecontrol.js b/test/unit/globecontrol.js index 14668bcd7f..e9eb805e3a 100644 --- a/test/unit/globecontrol.js +++ b/test/unit/globecontrol.js @@ -14,8 +14,8 @@ describe('GlobeControls', function () { const controls = viewer.controls; viewer.getPickingPositionFromDepth = (coords, pickingPoint) => { - viewer.camera.camera3D.updateMatrixWorld(); - const lookAt = getLookAtFromMath(viewer, viewer.camera.camera3D); + viewer.camera3D.updateMatrixWorld(); + const lookAt = getLookAtFromMath(viewer, viewer.camera3D); if (lookAt) { if (pickingPoint) { pickingPoint.copy(lookAt); @@ -199,7 +199,7 @@ describe('GlobeControls', function () { }); it('lookAtCoordinate with animation', function (done) { - const rig = getRig(viewer.camera.camera3D); + const rig = getRig(viewer.camera3D); let i; controls.lookAtCoordinate({ coord: placement.coord, time: 10 }, true) .then((e) => { diff --git a/test/unit/globeview.js b/test/unit/globeview.js index aa59113dcf..0d5cf8278b 100644 --- a/test/unit/globeview.js +++ b/test/unit/globeview.js @@ -20,7 +20,7 @@ describe('GlobeView', function () { pickedPosition.copy(viewer.camera.position()); const cameraDirection = new THREE.Vector3(); - viewer.camera.camera3D.getWorldDirection(cameraDirection); + viewer.camera3D.getWorldDirection(cameraDirection); cameraDirection.multiplyScalar(placement.range); pickedPosition.add(cameraDirection); @@ -97,12 +97,11 @@ describe('GlobeView', function () { extent, { renderer }, ); - const camera3D = extentViewer.camera.camera3D; const size = new THREE.Vector3(); new OBB().setFromExtent(extent).box3D.getSize(size); assert.ok( - CameraUtils.getTransformCameraLookingAtTarget(extentViewer, camera3D).range - - size.x / (2 * Math.tan(THREE.MathUtils.degToRad(camera3D.fov) / 2)) + CameraUtils.getTransformCameraLookingAtTarget(extentViewer, extentViewer.camera3D).range - + size.x / (2 * Math.tan(THREE.MathUtils.degToRad(extentViewer.camera3D.fov) / 2)) < 10 ** -6, ); }); diff --git a/test/unit/label.js b/test/unit/label.js index 5aa2f489fb..27ec39d409 100644 --- a/test/unit/label.js +++ b/test/unit/label.js @@ -270,8 +270,8 @@ describe('Label2DRenderer', function () { labelLayer.update(context, labelLayer, tiles[0], tiles[0].parent); assert.equal(1, labelLayer.object3d.children.length); view.controls.lookAtCoordinate({ coord: labelLayer.object3d.children[0].children[0].coordinates, range: 1000 }, false).then(() => { - view.camera.camera3D.updateMatrixWorld(true); - label2dRenderer.render(view.scene, view.camera.camera3D); + view.camera3D.updateMatrixWorld(true); + label2dRenderer.render(view.scene, view.camera3D); assert.equal(1, label2dRenderer.grid.visible.length); const label = label2dRenderer.grid.visible[0]; assert.ok(label.visible); diff --git a/test/unit/planarControls.js b/test/unit/planarControls.js index 17542acd01..3d5e7604ca 100644 --- a/test/unit/planarControls.js +++ b/test/unit/planarControls.js @@ -17,8 +17,8 @@ describe('Planar Controls', function () { const controlsPerspective = viewPerspective.controls; const controlsOrtho = viewOrtho.controls; - const cameraPerspective = viewPerspective.camera.camera3D; - const cameraOrtho = viewOrtho.camera.camera3D; + const cameraPerspective = viewPerspective.camera3D; + const cameraOrtho = viewOrtho.camera3D; const touche = { clientX: 50, diff --git a/test/unit/view.js b/test/unit/view.js index 4fdae50616..c8c1181f02 100644 --- a/test/unit/view.js +++ b/test/unit/view.js @@ -148,7 +148,7 @@ describe('Viewer', function () { renderer, camera: { type: CAMERA_TYPE.ORTHOGRAPHIC }, }); - assert.ok(view.camera.camera3D.isOrthographicCamera); + assert.ok(view.camera3D.isOrthographicCamera); }); it('should create the correct camera from specific camera', () => { const camera = new THREE.PerspectiveCamera(50, 0.5); @@ -156,6 +156,6 @@ describe('Viewer', function () { renderer, camera: { cameraThree: camera }, }); - assert.equal(view.camera.camera3D, camera); + assert.equal(view.camera3D, camera); }); }); diff --git a/utils/debug/3dTilesDebug.js b/utils/debug/3dTilesDebug.js index d9a13a57f7..f88c691fc8 100644 --- a/utils/debug/3dTilesDebug.js +++ b/utils/debug/3dTilesDebug.js @@ -104,12 +104,12 @@ export default function create3dTilesDebugUI(datDebugTool, view, _3dTileslayer) View.prototype.addLayer.call(view, obbLayer, _3dTileslayer).then((l) => { gui.add(l, 'visible').name('Bounding boxes').onChange(() => { - view.notifyChange(view.camera.camera3D); + view.notifyChange(view.camera3D); }); }); // The sse Threshold for each tile gui.add(_3dTileslayer, 'sseThreshold', 0, 100).name('sseThreshold').onChange(() => { - view.notifyChange(view.camera.camera3D); + view.notifyChange(view.camera3D); }); } diff --git a/utils/debug/Debug.js b/utils/debug/Debug.js index dde1726434..97420a456b 100644 --- a/utils/debug/Debug.js +++ b/utils/debug/Debug.js @@ -103,7 +103,7 @@ function Debug(view, datDebugTool, chartDivContainer) { initialPosition.crs = view.referenceCrs; const cursorWorldPosition = new THREE.Vector3(); - const getCenter = (controls && controls.getCameraTargetPosition) ? controls.getCameraTargetPosition : () => view.camera.camera3D.position; + const getCenter = (controls && controls.getCameraTargetPosition) ? controls.getCameraTargetPosition : () => view.camera3D.position; const cameraTargetListener = (event) => { if (view.getPickingPositionFromDepth(view.eventToViewCoords(event), cursorWorldPosition)) { initialPosition.setFromVector3(cursorWorldPosition).as('EPSG:4326', geoPosition); @@ -142,8 +142,8 @@ function Debug(view, datDebugTool, chartDivContainer) { })()); // Camera debug - const helper = new CameraHelper(view.camera.camera3D); - const debugCamera = view.camera.camera3D.clone(); + const helper = new CameraHelper(view.camera3D); + const debugCamera = view.camera3D.clone(); debugCamera.fov *= 1.5; debugCamera.updateProjectionMatrix(); const g = view.mainLoop.gfxEngine; @@ -176,7 +176,7 @@ function Debug(view, datDebugTool, chartDivContainer) { const ratio = 0.25; const size = { x: g.width * ratio, y: g.height * ratio }; debugCamera.aspect = size.x / size.y; - const camera = view.camera.camera3D; + const camera = view.camera3D; const coord = new Coordinates(view.referenceCrs, camera.position).as(tileLayer.extent.crs); const extent = view.tileLayer.info.displayed.extent; displayedTilesObb.setFromExtent(extent); @@ -185,7 +185,7 @@ function Debug(view, datDebugTool, chartDivContainer) { // Note Method to compute near and far... // const bbox = displayedTilesObb.box3D.clone().applyMatrix4(displayedTilesObb.matrixWorld); - // const distance = bbox.distanceToPoint(view.camera.camera3D.position); + // const distance = bbox.distanceToPoint(view.camera3D.position); // console.log('distance', distance, distance + bbox.getBoundingSphere(sphere).radius * 2); // Compute position camera debug @@ -197,7 +197,7 @@ function Debug(view, datDebugTool, chartDivContainer) { debugCamera.position.z += altitudeCameraDebug; camera.localToWorld(debugCamera.position); // Compute target camera debug - lookAtCameraDebug.copy(view.camera.camera3D.position); + lookAtCameraDebug.copy(view.camera3D.position); camera.worldToLocal(lookAtCameraDebug); lookAtCameraDebug.z -= altitudeCameraDebug * 1.5; camera.localToWorld(lookAtCameraDebug); diff --git a/utils/debug/TileDebug.js b/utils/debug/TileDebug.js index 0a96a0e600..3adb106572 100644 --- a/utils/debug/TileDebug.js +++ b/utils/debug/TileDebug.js @@ -218,7 +218,7 @@ export default function createTileDebugUI(datDebugTool, view, layer, debugInstan if (selectNode) { circle.style.display = 'table-cell'; centerNode.copy(selectNode.boundingSphere.center).applyMatrix4(selectNode.matrixWorld); - const project = centerNode.project(view.camera.camera3D); + const project = centerNode.project(view.camera3D); const coords = view.normalizedToViewCoords(project); const size = selectNode.screenSize;