chore(web): switch to MapControls in map viewer

wowserhq · Dec 30, 2023 · fb602e9 · fb602e9
1 parent 00ab8f5
commit fb602e9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 20 deletions.
diff --git a/packages/spelunker-web/package-lock.json b/packages/spelunker-web/package-lock.json
diff --git a/packages/spelunker-web/package.json b/packages/spelunker-web/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@apollo/client": "^3.8.8",
     "@wowserhq/format": "^0.9.0",
-    "@wowserhq/scene": "^0.8.1",
+    "@wowserhq/scene": "^0.9.0",
     "classnames": "^2.3.1",
     "crypto-hash": "^2.0.0",
     "graphql": "^16.8.1",

diff --git a/packages/spelunker-web/src/components/core/MapViewer/index.jsx b/packages/spelunker-web/src/components/core/MapViewer/index.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { AssetManager, FormatManager, TextureManager, MapManager, OrbitControls } from '@wowserhq/scene';
+import { AssetManager, FormatManager, TextureManager, MapManager, MapControls } from '@wowserhq/scene';
 import * as THREE from 'three';
 import styles from './index.styl';
 
@@ -45,20 +45,15 @@ const MapViewer = ({ map: { filename } }) => {
       const scene = new THREE.Scene();
       scene.matrixAutoUpdate = false;
 
-      const controls = new OrbitControls(camera, renderer.domElement);
+      const controls = new MapControls(camera, renderer.domElement);
       controls.enableDamping = true;
       controls.dampingFactor = 0.25;
-      controls.minDistance = 10;
-      controls.maxDistance = 900;
       controls.panSpeed = 5.0;
       controls.keyPanSpeed = 20.0;
       controls.zoomSpeed = 5.0;
-      controls.screenSpacePanning = false;
-      controls.update();
 
-      const raycaster = new THREE.Raycaster();
-      const coords = new THREE.Vector2();
-      const targetOffset = 100.0;
+      const position = new THREE.Vector3(100.0, 100.0, 0.0);
+      controls.setView(position);
 
       const mapManager = new MapManager(filename, formatManager, textureManager);
       mapManagerRef.current = mapManager;
@@ -70,9 +65,6 @@ const MapViewer = ({ map: { filename } }) => {
       const animate = () => {
         const delta = clock.getDelta();
 
-        raycaster.setFromCamera(coords, camera);
-        raycaster.ray.at(targetOffset, controls.target);
-
         mapManager.setTarget(camera.position.x, camera.position.y);
 
         controls.update(delta);