feat: improve focus

src/App.tsx

@@ -17,24 +17,27 @@ const Room = () => {
   const room = useLoader(FBXLoader, "/room.fbx");
   const [focus, setFocus] = useState<string | null>(null);
 
-  const [cameraData, setCameraData] = useState<{
+  const cameraPosition = useRef<Vector3 | null>(null);
-    position: Vector3;
+  const cameraTarget = useRef<Vector3>(new Vector3(0, 1, 0));
-    target: Vector3;
-  } | null>(null);
 
   const { camera } = useThree();
 
   useFrame(() => {
     if (!controls.current) return;
 
-    if (cameraData) {
+    if (cameraPosition.current) {
-      camera.position.lerp(cameraData.position, 0.09);
+      camera.position.lerp(cameraPosition.current, 0.09);
-      controls.current.target.lerp(cameraData.target, 0.09);
+      if (camera.position.distanceTo(cameraPosition.current) < 0.012) {
+        if (!focus) {
+          controls.current.enableZoom = true;
+          controls.current.enableRotate = true;
+        }
 
-      if (camera.position.distanceTo(cameraData.position) < 0.01) {
+        cameraPosition.current = null;
-        setCameraData(null);
       }
     }
+
+    controls.current.target.lerp(cameraTarget.current, 0.1);
   });
 
   const handleClick = (e: ThreeEvent<MouseEvent>) => {
@@ -48,22 +51,18 @@ const Room = () => {
       e.object.getWorldPosition(objectPos);
       e.object.getWorldDirection(objectDir);
 
-      setCameraData({
+      cameraPosition.current = objectPos
-        position: objectPos.clone().add(objectDir.multiplyScalar(-0.65)),
+        .clone()
-        target: objectPos,
+        .add(objectDir.multiplyScalar(-0.65));
-      });
+      cameraTarget.current = objectPos;
 
       controls.current.enableZoom = false;
       controls.current.enableRotate = false;
 
       setFocus(e.object.name);
     } else if (focus) {
-      controls.current.enableZoom = true;
+      cameraPosition.current = new Vector3(3, 3, -3);
-      controls.current.enableRotate = true;
+      cameraTarget.current = new Vector3(0, 1, 0);
-      setCameraData({
-        position: new Vector3(3, 3, -3),
-        target: new Vector3(0, 1, 0),
-      });
 
       setFocus(null);
     }
@@ -80,7 +79,6 @@ const Room = () => {
         target={[0, 1, 0]}
         maxPolarAngle={Math.PI / 2}
         enablePan={false}
-        onStart={() => setCameraData(null)}
       />
 
       <mesh onClick={handleClick}>