Merge pull request #405 from open-pv/feature/3d-touch-rotation

OrbitControls -> MapControls
open-pv · Jan 17, 2025 · b5968a4 · b5968a4
2 parents 1dd494f + 674ab18
commit b5968a4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/src/components/ThreeViewer/Controls/CustomMapControl.jsx b/src/components/ThreeViewer/Controls/CustomMapControl.jsx
@@ -1,4 +1,4 @@
-import { OrbitControls } from '@react-three/drei'
+import { MapControls } from '@react-three/drei'
 import { useFrame, useThree } from '@react-three/fiber'
 import React, { useEffect, useRef } from 'react'
 import * as THREE from 'three'
@@ -101,7 +101,7 @@ function CustomMapControl(props) {
   })
 
   return (
-    <OrbitControls
+    <MapControls
       ref={controlsRef}
       args={[camera, gl.domElement]}
       target={props.middle}
@@ -110,6 +110,10 @@ function CustomMapControl(props) {
         MIDDLE: THREE.MOUSE.DOLLY,
         RIGHT: THREE.MOUSE.ROTATE,
       }}
+      touches={{
+        ONE: THREE.TOUCH.PAN,
+        TWO: THREE.TOUCH.DOLLY_ROTATE,
+      }}
       screenSpacePanning={false}
       dampingFactor={1}
       maxPolarAngle={Math.PI / 2}

diff --git a/src/index.jsx b/src/index.jsx
@@ -23,21 +23,19 @@ window.isTouchDevice = isTouchDevice()
 // See https://reactjs.org/docs/strict-mode.html
 const StrictApp = () => (
   <ChakraProvider>
-    <React.StrictMode>
-      <BrowserRouter basename={PUBLIC_URL}>
-        <Suspense fallback={<Main />}>
-          <Routes>
-            <Route path='/' element={<Map />} />
-            <Route path='/simulation/:lon/:lat' element={<Simulation />} />
-            <Route path='/anleitung' element={<About />} />
-            <Route path='/about' element={<About />} />
-            <Route path='/impressum' element={<Impressum />} />
-            <Route path='/datenschutz' element={<Datenschutz />} />
-            <Route path='*' element={<NotFound />} />
-          </Routes>
-        </Suspense>
-      </BrowserRouter>
-    </React.StrictMode>
+    <BrowserRouter basename={PUBLIC_URL}>
+      <Suspense fallback={<Main />}>
+        <Routes>
+          <Route path='/' element={<Map />} />
+          <Route path='/simulation/:lon/:lat' element={<Simulation />} />
+          <Route path='/anleitung' element={<About />} />
+          <Route path='/about' element={<About />} />
+          <Route path='/impressum' element={<Impressum />} />
+          <Route path='/datenschutz' element={<Datenschutz />} />
+          <Route path='*' element={<NotFound />} />
+        </Routes>
+      </Suspense>
+    </BrowserRouter>
   </ChakraProvider>
 )