Merge pull request #54 from thkruz/fix-camera-controls

fix: 🐛 fix camera controls using threejs solution

index.html

@@ -84,13 +84,6 @@
         <div class="sat-info-value" id="sat-period">100  min</div>
       </div>
     </div>
-    <div id="zoom-controls">
-      <!--
-      <div id="center-loc" class="zoom-button">❂</div>
-      -->
-      <div id="zoom-in" class="zoom-button">+</div>
-      <div id="zoom-out" class="zoom-button">-</div>
-    </div>
     <div id="load-cover">
       <div id="loader">
         <div id="spinner-holder"><img src="/images/loading.gif" alt="loading" class="loading-spinner"/></div>

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;

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<string, any>) {
     this.config = { ...config, ...this.config };
   }
@@ -89,17 +80,6 @@ class Viewer {
     }
   }
 
-  /**
-   * Handles the scroll wheel event.
-   */
-  onWheel (event: WheelEvent) {
-    if (event.deltaY > 0) {
-      this.zoomOut();
-    } else {
-      this.zoomIn();
-    }
-  }
-
   private onSatDataLoaded (satData: Record<string, any>) {
     this.eventManager.fireEvent('satdataloaded', satData);
     this.ready = true;
@@ -212,6 +192,9 @@ class Viewer {
 
   onMouseDown () {
     this.mouseMoved = false;
+    if (this.controls) {
+      this.controls.autoRotate = false;
+    }
     window.addEventListener('mousemove', this.onMouseMove.bind(this));
   }
 
@@ -252,6 +235,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 +246,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,17 +294,9 @@ 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));
-      window.addEventListener('wheel', this.onWheel.bind(this));
 
       const canvasElement = this.renderer.domElement;
       canvasElement.addEventListener('mousedown', this.onMouseDown.bind(this));
@@ -329,8 +314,6 @@ class Viewer {
       component.update(this.scene);
     }
 
-    this.updateCamera();
-
     if (this.controls) {
       this.controls.update();
     }
@@ -340,26 +323,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;
   }