points in virtual-tour

src/components/virtualTour/VirtualTourWrapper.tsx

@@ -1,32 +1,32 @@
-import { OrbitControls, Html, useTexture } from "@react-three/drei";
-import { Suspense, useEffect, useRef, useState } from "react";
+import { OrbitControls, Html } from "@react-three/drei";
+import { Suspense, useEffect, useRef } from "react";
 import { OrbitControls as OrbitControlsImpl } from "three-stdlib";
-import { useParams } from "react-router-dom";
 import useCompass from "../../store/useCompass";
 import SphereTour from "./SphereTour";
-import { spheres } from "../../consts/spheres";
+import { IAppartmentSphere } from "../../types/apartmentSphere";
 import useSphere from "../../store/useSphere";
+import LabelMarker from "./LabelMarker";
+// import { spheres } from "../../consts/spheres";
 
-const VirtualTourWrapper = () => {
+interface VirtualTourWrapperProps {
+  appartment: IAppartmentSphere;
+}
+
+const VirtualTourWrapper = ({ appartment }: VirtualTourWrapperProps) => {
   const orbitRef = useRef<OrbitControlsImpl>(null);
 
-  const { setCurrentCompassRotate, currentCompassRotate } = useCompass();
-  const { id } = useParams();
-  const [startRotatingPos, setStartRotatingPos] = useState(0);
+  const { setCurrentCompassRotate } = useCompass();
   const { selectedSphere, setSelectedSphere } = useSphere();
-  // const [selectedSphere, setSelectedSphere] = useState<IAppartmentSphere>(
-  //   spheres[1]
-  // );
+
   useEffect(() => {
-    setSelectedSphere(spheres[0]);
+    setSelectedSphere(appartment.spheres[0]);
   }, []);
 
   const handleOnRotating = () => {
     const radian = orbitRef.current?.getAzimuthalAngle();
     if (radian) {
       const currentCompasDegrees = (radian * 180) / Math.PI + 180;
-      const compassOffsetDegres = startRotatingPos - currentCompasDegrees;
-      setCurrentCompassRotate(currentCompassRotate + compassOffsetDegres);
+      setCurrentCompassRotate(currentCompasDegrees);
     }
   };
 
@@ -38,12 +38,23 @@ const VirtualTourWrapper = () => {
         </Html>
       }
     >
-      {spheres.map((sphere) => (
-        <SphereTour
-          sphere={sphere}
-          selectedSphere={selectedSphere || spheres[0]}
-        />
-      ))}
+      {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}
@@ -53,7 +64,7 @@ const VirtualTourWrapper = () => {
         // onStart={(e) => console.log("e", e)}
         // onChange={(e) => console.log("e", e?.target)}
         onChange={handleOnRotating}
-        target={[-14.16, 0, 24.11]}
+        target={appartment.spheres[0].position}
       />
     </Suspense>
   );