well this is gonna take some time

src/CameraController.jsx

@@ -0,0 +1,57 @@
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { OrbitControls, PositionPoint } from "@react-three/drei";
+import React, {
+  Suspense,
+  useRef,
+  createContext,
+  memo,
+  useState,
+  useContext,
+} from "react";
+import * as THREE from "three";
+
+import { ScreenOverlay } from "./omnioverlay.jsx";
+import { SharedPlanetState } from "./SharedPlanetState.jsx";
+import { Skybox } from "./skybox.jsx";
+import { MyContext } from "./Scene3.jsx";
+
+export const CameraController = () => {
+  const { customData } = useContext(MyContext);
+  const [distance, setDistance] = useState(5);
+  const [lookAt, setLookAt] = useState(new THREE.Vector3(0, 0, 0));
+  const [position, setPosition] = useState(new THREE.Vector3(0, 0, 200));
+  const [animate, setAnimate] = useState(true);
+  const { camera } = useThree();
+  const state = useThree();
+
+  const relativePosition = new THREE.Vector3(0, 0, distance);
+
+  const handleLookAt = (pos) => {
+    setLookAt(pos);
+  };
+  customData.current["handleLookAt"] = handleLookAt;
+
+  const handlePosition = (pos) => {
+    const newPosition = pos.clone().add(relativePosition);
+    setPosition(newPosition);
+    setAnimate(true);
+    //console.log(newPosition);
+  };
+  customData.current["handlePosition"] = handlePosition;
+
+  useFrame(() => {
+    //console.log(state);
+    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);
+  });
+  return <></>;
+};

src/Scene3.jsx

@@ -5,6 +5,7 @@ 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();
 
@@ -22,13 +23,18 @@ const SolarSystemScene = () => {
               fov: 75,
               near: 0.1,
               far: 1000000,
-              position: [0, 100, 200],
+              position: [0, 0, 200],
             }}
           >
+            <CameraController />
             <Skybox />
             <ambientLight intensity={0.5} />
             <SharedPlanetState />
-            <OrbitControls ref={controls} />
+            <OrbitControls
+              enableZoom={false}
+              enablePan={false}
+              ref={controls}
+            />
           </Canvas>
         </Suspense>
       </MyContext.Provider>

src/earth.jsx

@@ -38,7 +38,7 @@ import { PlanetPath } from "./path";
 import { MyContext } from "./Scene3";
 import { PlanetOverlayContext } from "./SharedPlanetState";
 
-export const Earth = ({ positions, speed, getPosition }) => {
+export const Earth = ({ speed, getPosition }) => {
   let distanceScaleFactor = 1000000;
   const [posArr, setPosArr] = useState([]);
   const lineArr = useRef([]);
@@ -46,7 +46,7 @@ export const Earth = ({ positions, speed, getPosition }) => {
   const clouds = useRef("clouds");
   const earth = useRef();
   const group = useRef();
-  const { customData } = useContext(MyContext);
+  const color = useRef("lightgreen");
 
   let planetPositionIndex = useRef(0);
 
@@ -113,7 +113,7 @@ export const Earth = ({ positions, speed, getPosition }) => {
       <PlanetPath
         linePos={lineArr.current}
         planet={group}
-        color={"yellow"}
+        color={color.current}
         lineLength={20}
       />
       <group ref={group}>

src/planetOverlay.jsx

@@ -60,13 +60,18 @@ 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);
-          //startFollow();
+          setFollow(true);
           break;
         case 2:
-          //endFollow();
+          setFollow(false);
+          //controls.current.maxDistance = Infinity;
+          console.log("right click");
           break;
       }
     },
@@ -80,6 +85,16 @@ export const PlanetOverlay = ({ planet }) => {
   }, [planet, name, minDistance, customData, iconVis, nameVis]);
 
   useFrame(() => {
+    if (follow) {
+      console.log(follow);
+      customData.current.handlePosition(
+        new THREE.Vector3(
+          planet.current.position.x,
+          planet.current.position.y,
+          planet.current.position.z
+        )
+      );
+    }
     var distance = camera.position.distanceTo(planet.current.position);
     if (distance < minDistance) {
       setOpacity(0);
@@ -87,14 +102,13 @@ export const PlanetOverlay = ({ planet }) => {
       setOpacity(1);
     }
     if (follow && controls) {
-      controls.current.target.copy(planet.current.position.clone());
+      //controls.current.target.copy(planet.current.position.clone());
-      controls.current.maxDistance = 20;
+      //controls.current.maxDistance = 20;
     }
     //console.log(iconVis);
   }, []);
 
   function startFollow() {
-    console.log(ref === ref);
     setFollow(true);
   }