try cameracontroler

src/CameraController.jsx

@@ -41,14 +41,13 @@ export const CameraController = () => {
 
   useFrame(() => {
     //console.log(state);
-    if (animate) {
+    /*if (animate) {
       camera.position.lerp(position, 0.1);
       camera.lookAt(lookAt);
       if (camera.position.distanceTo(position) < 0.1) {
         setAnimate(false);
       }
-    }
-
+    }*/
     //cameraRef.current.position.addScalar(2);
     //camera.position.addScalar(1);
     //console.log(camera);

src/Scene3.jsx

@@ -5,7 +5,6 @@ import React, { Suspense, useRef, createContext, memo } from "react";
 import { ScreenOverlay } from "./omnioverlay.jsx";
 import { SharedPlanetState } from "./SharedPlanetState.jsx";
 import { Skybox } from "./skybox.jsx";
-import { CameraController } from "./CameraController.jsx";
 
 export const MyContext = createContext();
 
@@ -26,7 +25,6 @@ const SolarSystemScene = () => {
               position: [0, 0, 200],
             }}
           >
-            <CameraController />
             <Skybox />
             <ambientLight intensity={0.5} />
             <SharedPlanetState />
@@ -35,6 +33,7 @@ const SolarSystemScene = () => {
               enablePan={false}
               ref={controls}
             />
+            <OrbitControls ref={controls} />
           </Canvas>
         </Suspense>
       </MyContext.Provider>

src/planetOverlay.jsx

@@ -60,16 +60,14 @@ export const PlanetOverlay = ({ planet }) => {
       // native event
       switch (event.nativeEvent.button) {
         case 0:
-          //controls.current.target.copy(planet.current.position.clone());
+          controls.current.target.copy(planet.current.position.clone());
           customData.current.showInfo(planet.current.userData);
-          console.log(planet.current.position);
 
-          customData.current.handleLookAt(planet.current.position);
-          console.log(customData);
-          setFollow(true);
+          //customData.current.handleLookAt(planet.current.position);
+          //setFollow(true);
           break;
         case 2:
-          setFollow(false);
+          //setFollow(false);
           //controls.current.maxDistance = Infinity;
           console.log("right click");
           break;
@@ -85,7 +83,7 @@ export const PlanetOverlay = ({ planet }) => {
   }, [planet, name, minDistance, customData, iconVis, nameVis]);
 
   useFrame(() => {
-    if (follow) {
+    /*if (follow) {
       console.log(follow);
       customData.current.handlePosition(
         new THREE.Vector3(
@@ -94,18 +92,13 @@ export const PlanetOverlay = ({ planet }) => {
           planet.current.position.z
         )
       );
-    }
+    }*/
     var distance = camera.position.distanceTo(planet.current.position);
     if (distance < minDistance) {
       setOpacity(0);
     } else {
       setOpacity(1);
     }
-    if (follow && controls) {
-      //controls.current.target.copy(planet.current.position.clone());
-      //controls.current.maxDistance = 20;
-    }
-    //console.log(iconVis);
   }, []);
 
   function startFollow() {
@@ -114,7 +107,7 @@ export const PlanetOverlay = ({ planet }) => {
 
   function endFollow() {
     setFollow(false);
-    controls.current.reset();
+    //controls.current.reset();
   }
 
   return (