From 28de224599e49b84eb362192fd07a3b9663a04da Mon Sep 17 00:00:00 2001 From: Theodore Kruczek Date: Fri, 29 Dec 2023 15:44:57 -0500 Subject: [PATCH 1/2] fix: :bug: fix camera controls using threejs solution I removed the HTML zoom buttons and implemented an all threejs solution. This does not have zoom dampening, but is cleaner than my previous idea. fixes #49 --- index.html | 7 ----- public/styles/style.css | 52 --------------------------------- src/viewer/index.ts | 65 ++++++++++++----------------------------- 3 files changed, 18 insertions(+), 106 deletions(-) diff --git a/index.html b/index.html index 22f0e00..114ed8d 100644 --- a/index.html +++ b/index.html @@ -84,13 +84,6 @@
100 min
-
- -
+
-
-
-
diff --git a/public/styles/style.css b/public/styles/style.css index 57a3358..64a0cda 100644 --- a/public/styles/style.css +++ b/public/styles/style.css @@ -354,58 +354,6 @@ body.loading .toolbar { display: none; } -#zoom-controls { - position:absolute; - right: 20px; - bottom: 20px; - width: 40px; - /* height:70px; */ - background: black; - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 5px; - overflow: hidden; -} - -.zoom-button { - height: 35px; - font-size: 20px; - font-weight: bold; - line-height: 35px; - text-align: center; - cursor: pointer; - border: 1px solid rgba(255, 255, 255, 0.2); - - -moz-user-select: -moz-none; - -khtml-user-select: none; - -webkit-user-select: none; - -o-user-select: none; - user-select: none; -} - -.zoom-button:first-child { - border-radius: 5px 5px 0 0; -} - -.zoom-button:last-child { - border-radius: 0 0 5px 5px; -} - -.zoom-button:hover { - background: #c33; -} - -.zoom-button:active { - background: #511; -} - -#zoom-in { - border-bottom: 1px solid rgba(255, 255, 255, 0.2); -} - -#zoom-out { - -} - #about-box { right: 10px; width: 500px; diff --git a/src/viewer/index.ts b/src/viewer/index.ts index 73a1540..5f99bbe 100644 --- a/src/viewer/index.ts +++ b/src/viewer/index.ts @@ -44,15 +44,6 @@ class Viewer { mouseMoved = false; targetZoom = 5; - /** The maximum zoom level for the viewer. This controls how close the camera can get to the earth. */ - private readonly maxZoomLevel = 60; - /** The minimum zoom level for the viewer. This controls how far the camera can get from the earth. */ - private readonly minZoomLevel = 2; - /** The ideal number of frames to take to zoom in or out. Higher number slows down the zoom animation. */ - private readonly framesPerZoomUpdate = 25; - /** The allowable margin for zooming in or out. If within this margin, the zoom level is set directly to the target zoom. */ - private readonly zoomAllowableMargin = 0.01; - constructor (config?: Record) { this.config = { ...config, ...this.config }; } @@ -93,11 +84,7 @@ class Viewer { * Handles the scroll wheel event. */ onWheel (event: WheelEvent) { - if (event.deltaY > 0) { - this.zoomOut(); - } else { - this.zoomIn(); - } + // Do Nothing } private onSatDataLoaded (satData: Record) { @@ -212,6 +199,9 @@ class Viewer { onMouseDown () { this.mouseMoved = false; + if (this.controls) { + this.controls.autoRotate = false; + } window.addEventListener('mousemove', this.onMouseMove.bind(this)); } @@ -252,6 +242,8 @@ class Viewer { try { this.scene = new SatelliteOrbitScene(); this.camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); + this.camera.position.z = 15; + this.camera.zoom = 1; this.renderer = new WebGLRenderer({ antialias: true }); this.renderer.setPixelRatio(window.devicePixelRatio); @@ -261,12 +253,20 @@ class Viewer { ?.appendChild(this.renderer.domElement); this.controls = new OrbitControls(this.camera, this.renderer.domElement); - this.camera.position.set( 15, 0, -100 ); + this.controls.rotateSpeed = 0.33; + this.controls.enablePan = false; + this.controls.enableZoom = true; + this.controls.enableDamping = true; + this.controls.dampingFactor = 0.05; + this.controls.zoomSpeed = 3; + this.controls.maxZoom = 10; + this.controls.minZoom = 3; + this.controls.autoRotate = true; + this.controls.autoRotateSpeed = 0.5; + this.controls.maxDistance = 50; + this.controls.minDistance = 3; this.controls.update(); - this.camera.position.y = 5; - this.camera.zoom = 5; - this.raycaster = new Raycaster(); this.satelliteStore = new SatelliteStore(this.config); @@ -301,13 +301,6 @@ class Viewer { this.controls.target = centrePoint; } - this.camera.position.y = 42; - this.controls.enablePan = false; - this.controls.enableZoom = false; - // this.controls.enableDamping = true; - // this.controls.autoRotate = true; - // this.controls.autoRotateSpeed = 0.5; - this.camera.updateProjectionMatrix(); window.addEventListener('resize', this.onWindowResize.bind(this)); @@ -329,8 +322,6 @@ class Viewer { component.update(this.scene); } - this.updateCamera(); - if (this.controls) { this.controls.update(); } @@ -340,26 +331,6 @@ class Viewer { } } - /** - * Updates the camera zoom based on the target zoom value. - * If the zoom target is different from the current zoom, it gradually zooms towards the target. - * If the zoom target is within a margin of 0.1 from the current zoom, it directly sets the zoom to the target. - * After updating the zoom, it clamps the zoom value and updates the camera's projection matrix. - */ - private updateCamera () { - if (this.camera) { - if (Math.abs(this.camera.zoom - this.targetZoom) > this.zoomAllowableMargin) { - this.camera.zoom += (this.targetZoom - this.camera.zoom) / this.framesPerZoomUpdate; - this.clampZoom(); - this.camera.updateProjectionMatrix(); - } else if (this.camera.zoom !== this.targetZoom) { - this.camera.zoom = this.targetZoom; - this.clampZoom(); - this.camera.updateProjectionMatrix(); - } - } - } - getSatelliteStore () { return this.satelliteStore; } From 98e4179add1db8bb89883913aef8c4f0a56a8131 Mon Sep 17 00:00:00 2001 From: Theodore Kruczek Date: Fri, 29 Dec 2023 15:51:35 -0500 Subject: [PATCH 2/2] refactor: :coffin: remove unused listener --- src/viewer/index.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/viewer/index.ts b/src/viewer/index.ts index 5f99bbe..6da5cfc 100644 --- a/src/viewer/index.ts +++ b/src/viewer/index.ts @@ -80,13 +80,6 @@ class Viewer { } } - /** - * Handles the scroll wheel event. - */ - onWheel (event: WheelEvent) { - // Do Nothing - } - private onSatDataLoaded (satData: Record) { this.eventManager.fireEvent('satdataloaded', satData); this.ready = true; @@ -304,7 +297,6 @@ class Viewer { this.camera.updateProjectionMatrix(); window.addEventListener('resize', this.onWindowResize.bind(this)); - window.addEventListener('wheel', this.onWheel.bind(this)); const canvasElement = this.renderer.domElement; canvasElement.addEventListener('mousedown', this.onMouseDown.bind(this));