client,server folders

2024-06-14 13:54:55 +05:00
parent e67512bd6d
commit 158f081b5f
649 changed files with 228 additions and 162 deletions
@@ -0,0 +1,72 @@
+import { OrbitControls, Html } from "@react-three/drei";
+import { Suspense, useEffect, useRef } from "react";
+import { OrbitControls as OrbitControlsImpl } from "three-stdlib";
+import useCompass from "../../store/useCompass";
+import SphereTour from "./SphereTour";
+import { IAppartmentSphere } from "../../types/apartmentSphere";
+import useSphere from "../../store/useSphere";
+import LabelMarker from "./LabelMarker";
+
+interface VirtualTourWrapperProps {
+  appartment: IAppartmentSphere;
+}
+
+const VirtualTourWrapper = ({ appartment }: VirtualTourWrapperProps) => {
+  const orbitRef = useRef<OrbitControlsImpl>(null);
+
+  const { setCurrentCompassRotate } = useCompass();
+  const { selectedSphere, setSelectedSphere } = useSphere();
+
+  const handleOnRotating = () => {
+    const radian = orbitRef.current?.getAzimuthalAngle();
+    if (radian) {
+      const currentCompasDegrees = (radian * 180) / Math.PI + 180;
+      setCurrentCompassRotate(currentCompasDegrees);
+    }
+  };
+
+  useEffect(() => {
+    setSelectedSphere(appartment.spheres[0]);
+  }, []);
+
+  return (
+    <Suspense
+      fallback={
+        <Html>
+          <div>Loading</div>
+        </Html>
+      }
+    >
+      {appartment.spheres.map((sphere) => {
+        const isLabelContains =
+          selectedSphere && sphere.id === selectedSphere.id;
+
+        return (
+          <>
+            {isLabelContains &&
+              sphere.links.map((sphereLink) => (
+                <LabelMarker sphereLink={sphereLink} apartment={appartment} />
+              ))}
+            <SphereTour
+              sphere={sphere}
+              selectedSphere={selectedSphere || appartment.spheres[0]}
+            />
+          </>
+        );
+      })}
+      <OrbitControls
+        ref={orbitRef}
+        maxDistance={0.001}
+        enableZoom={false}
+        rotateSpeed={0.5}
+        reverseOrbit
+        // onStart={(e) => console.log("e", e)}
+        // onChange={(e) => console.log("e", e?.target)}
+        onChange={handleOnRotating}
+        target={appartment.spheres[0].position}
+      />
+    </Suspense>
+  );
+};
+
+export default VirtualTourWrapper;