From f2c81c6c89201937e46ff63377c60c011ba5f56c Mon Sep 17 00:00:00 2001 From: Vincent JAILLOT Date: Mon, 21 Aug 2023 18:44:00 +0200 Subject: [PATCH] feat(View): add helpers to get threejs renderer, renderer size and camera --- examples/3dtiles_basic.html | 9 ++-- examples/3dtiles_pointcloud.html | 17 +++---- examples/effects_postprocessing.html | 2 +- examples/effects_stereo.html | 12 ++--- examples/entwine_simple_loader.html | 2 +- examples/itowns-potree.html | 11 ++--- examples/js/OrientedImageHelper.js | 2 +- examples/js/plugins/DragNDrop.js | 2 +- examples/laz_dragndrop.html | 11 ++--- examples/misc_camera_animation.html | 2 +- examples/misc_camera_traveling.html | 9 ++-- examples/misc_compare_25d_3d.html | 4 +- examples/misc_georeferenced_images.html | 4 +- examples/potree_25d_map.html | 9 ++-- examples/source_stream_wfs_3d.html | 2 +- examples/view_immersive.html | 11 +++-- examples/view_multi_25d.html | 11 +++-- 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 | 9 ++-- src/Core/MainLoop.js | 7 +-- src/Core/Picking.js | 7 +-- src/Core/Prefab/Globe/Atmosphere.js | 2 +- src/Core/Prefab/GlobeView.js | 7 +-- src/Core/Prefab/PlanarView.js | 2 +- src/Core/View.js | 61 +++++++++++++++++-------- src/Renderer/Camera.js | 6 +-- src/Renderer/c3DEngine.js | 5 +- src/Utils/CameraUtils.js | 2 +- src/Utils/gui/Minimap.js | 22 ++++----- test/functional/3dtiles_ion.js | 2 +- test/functional/CameraUtils.js | 36 +++++---------- test/functional/GlobeControls.js | 2 +- test/functional/misc_clamp_ground.js | 6 +-- test/functional/view_25d_map.js | 12 ++--- test/hooks_functional.js | 4 +- test/unit/3dtileslayerprocess.js | 2 +- test/unit/globecontrol.js | 6 +-- test/unit/globeview.js | 4 +- 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, 199 insertions(+), 178 deletions(-) diff --git a/examples/3dtiles_basic.html b/examples/3dtiles_basic.html index c03c003dd7..947d48f412 100644 --- 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'); diff --git a/examples/3dtiles_pointcloud.html b/examples/3dtiles_pointcloud.html index 72d61ecf84..2225f90a60 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..96283024fb 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.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 index dc9cdda2a6..538a49230a 100644 --- 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 index 1864d854f5..4b4e1d0008 100644 --- 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 index 9c3c5262ee..6db74d2541 100644 --- 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 index bc86c8d236..a66f7bbf46 100644 --- 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 index aeb4ea7bcf..3a4283185d 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.getThreeJsCamera(), extent); }); }; diff --git a/examples/laz_dragndrop.html b/examples/laz_dragndrop.html index e82e784a83..cc1906a8d1 100644 --- a/examples/laz_dragndrop.html +++ b/examples/laz_dragndrop.html @@ -45,23 +45,22 @@ 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); + var cameraThree = view.getThreeJsCamera(); + 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 index c3c4eda405..bb93febdfd 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.getThreeJsCamera(), pathTravel); } diff --git a/examples/misc_camera_traveling.html b/examples/misc_camera_traveling.html index 156ad31e27..81f848c8cd 100644 --- 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 index 469e31ba3d..8413accf04 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.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 index 02627efbab..bde049447b 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.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 index 7bd87a7fff..cd07797dc3 100644 --- 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 index caba39e13a..5219e7d271 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.getThreeJsCamera(), 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..1334beac82 100644 --- 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 index f3b1f2d494..5b8981baba 100644 --- 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(); diff --git a/examples/view_multiglobe.html b/examples/view_multiglobe.html index 37a2cdeefa..d17913a822 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.getThreeJsCamera(); 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..5798d88212 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.getThreeJsCamera()); } 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.getThreeJsCamera(); 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..199f9e1d49 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.getThreeJsCamera(); 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..78595ea273 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.getThreeJsCamera(); // State control this.states = new StateControl(this.view); diff --git a/src/Controls/PlanarControls.js b/src/Controls/PlanarControls.js index 29d4ab3134..ff24aaa1b5 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.getThreeJsCamera(); // 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..2b81e00de8 100644 --- a/src/Controls/StreetControls.js +++ b/src/Controls/StreetControls.js @@ -39,7 +39,8 @@ 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 cameraThree = view.getThreeJsCamera(); + const distanceToGround = cameraThree.position.distanceTo(target); // pick on building layer const buildings = buildingsLayer ? view.pickObjectsAt(event, -1, buildingsLayer) : []; @@ -51,7 +52,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 = cameraThree.far * 0.95; if (distanceToGround < far) { // compute normal if (view.tileLayer.isGlobeLayer) { @@ -395,12 +396,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.getThreeJsCamera()); } // 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.getThreeJsCamera()); } } diff --git a/src/Core/MainLoop.js b/src/Core/MainLoop.js index 6f18352a52..ff51d5df8a 100644 --- a/src/Core/MainLoop.js +++ b/src/Core/MainLoop.js @@ -193,8 +193,9 @@ 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 cameraThree = view.getThreeJsCamera(); + const oldAutoUpdate = cameraThree.matrixAutoUpdate; + cameraThree.matrixAutoUpdate = false; // update data-structure this.#update(view, updateSources, dt); @@ -219,7 +220,7 @@ class MainLoop extends EventDispatcher { document.title = document.title.substr(0, document.title.length - 2); } - view.camera.camera3D.matrixAutoUpdate = oldAutoUpdate; + cameraThree.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..dce8079c9d 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.getThreeJsCamera().getWorldPosition(cameraPos); cameraPosCoord.setCrs(view.referenceCrs); cameraPosCoord.setFromVector3(cameraPos); const dist = pointPosCoord.spatialEuclideanDistanceTo(cameraPosCoord); @@ -204,8 +204,9 @@ export default { pickObjectsAt(view, viewCoords, radius, object, target = []) { // Raycaster use NDC coordinate view.viewToNormalizedCoords(viewCoords, normalized); + const cameraThree = view.getThreeJsCamera(); if (radius < 0) { - raycaster.setFromCamera(normalized, view.camera.camera3D); + raycaster.setFromCamera(normalized, cameraThree); const intersects = raycaster.intersectObject(object, true); for (const inter of intersects) { @@ -260,7 +261,7 @@ export default { .setY(normalized.y + y / view.camera.height); raycaster.setFromCamera( tmp, - view.camera.camera3D); + cameraThree); 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..f5d93cb8e9 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.getThreeJsCamera().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..6c84eafc39 100644 --- a/src/Core/Prefab/GlobeView.js +++ b/src/Core/Prefab/GlobeView.js @@ -99,8 +99,9 @@ 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; + const cameraThree = this.getThreeJsCamera(); + cameraThree.near = Math.max(15.0, 0.000002352 * ellipsoidSizes.x); + cameraThree.far = ellipsoidSizes.x * 10; const tileLayer = new GlobeLayer('globe', options.object3d, options); this.mainLoop.gfxEngine.label2dRenderer.infoTileLayer = tileLayer.info; @@ -121,7 +122,7 @@ class GlobeView extends View { } if (options.noControls) { - CameraUtils.transformCameraToLookAtTarget(this, this.camera.camera3D, placement); + CameraUtils.transformCameraToLookAtTarget(this, cameraThree, 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..4cdf4e1bf7 100644 --- a/src/Core/Prefab/PlanarView.js +++ b/src/Core/Prefab/PlanarView.js @@ -42,7 +42,7 @@ class PlanarView extends View { // Configure camera const dim = extent.planarDimensions(); const max = Math.max(dim.x, dim.y); - const camera3D = this.camera.camera3D; + const camera3D = this.getThreeJsCamera(); camera3D.near = 0.1; camera3D.far = camera3D.isOrthographicCamera ? 2000 : 2 * max; camera3D.updateProjectionMatrix(); diff --git a/src/Core/View.js b/src/Core/View.js index f10f53df2f..e81be8c09e 100644 --- a/src/Core/View.js +++ b/src/Core/View.js @@ -129,7 +129,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.getThreeJsCamera(), viewerDiv); * * @example Enable WebGl 1.0 instead of WebGl 2.0. * var viewerDiv = document.getElementById('viewerDiv'); @@ -331,7 +331,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.getRenderer()?.capabilities?.isWebGL2; parentLayer.attach(layer); } else { parentLayer.attach(layer); @@ -764,7 +764,7 @@ class View extends THREE.EventDispatcher { * @return {number} The zoom scale. */ getScale(pitch = 0.28) { - if (this.camera.camera3D.isOrthographicCamera) { + if (this.getThreeJsCamera().isOrthographicCamera) { return pitch * 1E-3 / this.getPixelsToMeters(); } return this.getScaleFromDistance(pitch, this.getDistanceFromCamera()); @@ -772,7 +772,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.getThreeJsCamera().fov); const unit = this.camera.height / (2 * distance * Math.tan(fov * 0.5)); return pitch * unit; } @@ -788,7 +788,7 @@ class View extends THREE.EventDispatcher { */ getDistanceFromCamera(screenCoord) { this.getPickingPositionFromDepth(screenCoord, positionVector); - return this.camera.camera3D.position.distanceTo(positionVector); + return this.getThreeJsCamera().position.distanceTo(positionVector); } /** @@ -802,8 +802,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.getThreeJsCamera().isOrthographicCamera) { + screenMeters = (this.getThreeJsCamera().right - this.getThreeJsCamera().left) / this.getThreeJsCamera().zoom; return pixels * screenMeters / this.camera.width; } return this.getPixelsToMetersFromDistance(pixels, this.getDistanceFromCamera(screenCoord)); @@ -824,8 +824,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.getThreeJsCamera().isOrthographicCamera) { + screenMeters = (this.getThreeJsCamera().right - this.getThreeJsCamera().left) / this.getThreeJsCamera().zoom; return meters * this.camera.width / screenMeters; } return this.getMetersToPixelsFromDistance(meters, this.getDistanceFromCamera(screenCoord)); @@ -995,7 +995,7 @@ 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; + const cameraThree = this.getThreeJsCamera(); mouse = mouse || dim.clone().multiplyScalar(0.5); mouse.x = Math.floor(mouse.x); @@ -1017,15 +1017,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() && cameraThree.type == 'PerspectiveCamera') { // TODO: solve this part with gl_FragCoord_Z and unproject // Origin - ray.origin.copy(camera.position); + ray.origin.copy(cameraThree.position); // Direction ray.direction.set(screen.x, screen.y, 0.5); // Unproject - matrix.multiplyMatrices(camera.matrixWorld, matrix.copy(camera.projectionMatrix).invert()); + matrix.multiplyMatrices(cameraThree.matrixWorld, matrix.copy(cameraThree.projectionMatrix).invert()); ray.direction.applyMatrix4(matrix); ray.direction.sub(ray.origin); @@ -1034,14 +1034,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, cameraThree); const length = orthoZ / Math.cos(angle); - target.addVectors(camera.position, ray.direction.setLength(length)); + target.addVectors(cameraThree.position, ray.direction.setLength(length)); } else { - const gl_FragCoord_Z = g.depthBufferRGBAValueToOrthoZ(buffer, camera); + const gl_FragCoord_Z = g.depthBufferRGBAValueToOrthoZ(buffer, cameraThree); target.set(screen.x, screen.y, gl_FragCoord_Z); - target.unproject(camera); + target.unproject(cameraThree); } if (target.length() > 10000000) { return undefined; } @@ -1127,9 +1127,34 @@ 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.getThreeJsCamera()); } } + + /** + * Get the Threejs renderer used to render this view. + * @returns {THREE.WebGLRenderer} the WebGLRenderer used to render this view. + */ + getRenderer() { + return this.mainLoop?.gfxEngine?.getRenderer(); + } + + /** + * Get the width and height of the renderer's output canvas, in pixels. + * @param {THREE.Vector2} target - the result will be copied into this Vector2. + * @returns {THREE.Vector2} the width and height of the renderer's output canvas, in pixels. + */ + getSize(target = new THREE.Vector2()) { + return this.getRenderer()?.getSize(target); + } + + /** + * Get the threejs Camera of this view + * @returns {THREE.Camera} the threejs camera of this view + */ + getThreeJsCamera() { + return this.camera?.camera3D; + } } export default View; diff --git a/src/Renderer/Camera.js b/src/Renderer/Camera.js index a580973376..8f24b4bb41 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.getThreeJsCamera().position.copy(camLocation.as(view.referenceCrs)); view.notifyChange(this.camera3D); } } diff --git a/src/Renderer/c3DEngine.js b/src/Renderer/c3DEngine.js index 669a0cc1ad..b30bb49463 100644 --- a/src/Renderer/c3DEngine.js +++ b/src/Renderer/c3DEngine.js @@ -57,10 +57,11 @@ class c3DEngine { this.fullSizeRenderTarget.depthTexture.type = THREE.UnsignedShortType; this.renderView = function _(view) { + const cameraThree = view.getThreeJsCamera(); this.renderer.clear(); - this.renderer.render(view.scene, view.camera.camera3D); + this.renderer.render(view.scene, cameraThree); if (view.tileLayer) { - this.label2dRenderer.render(view.tileLayer.object3d, view.camera.camera3D); + this.label2dRenderer.render(view.tileLayer.object3d, cameraThree); } }.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..ea194c8f12 100644 --- a/src/Utils/gui/Minimap.js +++ b/src/Utils/gui/Minimap.js @@ -130,7 +130,7 @@ class Minimap extends Widget { }); // Store minimap view camera3D in constant for code convenience. - const camera3D = this.view.camera.camera3D; + const cameraThree = this.view.getThreeJsCamera(); @@ -138,8 +138,8 @@ class Minimap extends Widget { // 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 = cameraThree.zoom * this.maxScale / initialScale; + const maxZoom = cameraThree.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 +149,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.getThreeJsCamera().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(); + cameraThree.zoom = this.zoomRatio * maxZoom * scale / this.minScale; + cameraThree.zoom = Math.min(Math.max(cameraThree.zoom, minZoom), maxZoom); + cameraThree.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); + cameraThree.position.x = viewCoordinates.x; + cameraThree.position.y = viewCoordinates.y; + cameraThree.updateMatrixWorld(true); - this.view.notifyChange(camera3D); + this.view.notifyChange(cameraThree); }); } } diff --git a/test/functional/3dtiles_ion.js b/test/functional/3dtiles_ion.js index ff178815ac..51e4d89095 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.getThreeJsCamera(), lyonExtent); }); await waitUntilItownsIsIdle(this.fullTitle()); const layers = await page.evaluate( diff --git a/test/functional/CameraUtils.js b/test/functional/CameraUtils.js index 044961f01a..ae03ea9aca 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.getThreeJsCamera(), 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.getThreeJsCamera(), { 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.getThreeJsCamera(), 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.getThreeJsCamera(), 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.getThreeJsCamera(), 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.getThreeJsCamera(), 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..e50acdda73 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.getThreeJsCamera()); 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..0d6237a800 100644 --- a/test/functional/misc_clamp_ground.js +++ b/test/functional/misc_clamp_ground.js @@ -31,8 +31,8 @@ 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 cameraThree = view.getThreeJsCamera(); + const viewMatrix = new itowns.THREE.Matrix4().multiplyMatrices(cameraThree.projectionMatrix, cameraThree.matrixWorldInverse); coneCenter.applyMatrix4(viewMatrix); const mouse = view.normalizedToViewCoords(coneCenter); @@ -67,7 +67,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.getThreeJsCamera().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..b6200271ff 100644 --- a/test/functional/view_25d_map.js +++ b/test/functional/view_25d_map.js @@ -33,18 +33,18 @@ 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); + const cameraThree = view.getThreeJsCamera(); + cameraThree.position.copy(lookat); + cameraThree.position.z = l; + cameraThree.lookAt(lookat); + view.notifyChange(cameraThree, true); }, length); await waitUntilItownsIsIdle(this.test.fullTitle()); result = await page.evaluate(() => { const depthMethod = view - .getPickingPositionFromDepth().distanceTo(view.camera.camera3D.position); + .getPickingPositionFromDepth().distanceTo(view.getThreeJsCamera().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..474bcdafa3 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.getThreeJsCamera()); }); 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.getThreeJsCamera()); resolve(true); } } diff --git a/test/unit/3dtileslayerprocess.js b/test/unit/3dtileslayerprocess.js index 5d6c234029..4438ce78b8 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.getThreeJsCamera().updateMatrixWorld(); threedTilesLayer.update(context, threedTilesLayer, node); assert.ok(node.pendingSubdivision); }); diff --git a/test/unit/globecontrol.js b/test/unit/globecontrol.js index 14668bcd7f..3509ac33b9 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.getThreeJsCamera().updateMatrixWorld(); + const lookAt = getLookAtFromMath(viewer, viewer.getThreeJsCamera()); 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.getThreeJsCamera()); 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..e55802e68c 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.getThreeJsCamera().getWorldDirection(cameraDirection); cameraDirection.multiplyScalar(placement.range); pickedPosition.add(cameraDirection); @@ -97,7 +97,7 @@ describe('GlobeView', function () { extent, { renderer }, ); - const camera3D = extentViewer.camera.camera3D; + const camera3D = extentViewer.getThreeJsCamera(); const size = new THREE.Vector3(); new OBB().setFromExtent(extent).box3D.getSize(size); assert.ok( diff --git a/test/unit/label.js b/test/unit/label.js index 5aa2f489fb..154f5af6a0 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.getThreeJsCamera().updateMatrixWorld(true); + label2dRenderer.render(view.scene, view.getThreeJsCamera()); 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..d360ee3edf 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.getThreeJsCamera(); + const cameraOrtho = viewOrtho.getThreeJsCamera(); const touche = { clientX: 50, diff --git a/test/unit/view.js b/test/unit/view.js index 4fdae50616..5f17de8252 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.getThreeJsCamera().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.getThreeJsCamera(), camera); }); }); diff --git a/utils/debug/3dTilesDebug.js b/utils/debug/3dTilesDebug.js index d9a13a57f7..dcfaab3550 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.getThreeJsCamera()); }); }); // The sse Threshold for each tile gui.add(_3dTileslayer, 'sseThreshold', 0, 100).name('sseThreshold').onChange(() => { - view.notifyChange(view.camera.camera3D); + view.notifyChange(view.getThreeJsCamera()); }); } diff --git a/utils/debug/Debug.js b/utils/debug/Debug.js index dde1726434..38448878aa 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.getThreeJsCamera().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.getThreeJsCamera()); + const debugCamera = view.getThreeJsCamera().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.getThreeJsCamera(); 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.getThreeJsCamera().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.getThreeJsCamera().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..243fdd24a3 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.getThreeJsCamera()); const coords = view.normalizedToViewCoords(project); const size = selectNode.screenSize;