virtual page

2024-05-28 12:45:10 +05:00
parent f4cf8a98ab
commit 9a489d64af
12 changed files with 261 additions and 45 deletions
@@ -1,39 +1,58 @@
-import { BackSide, MeshBasicMaterial } from "three";
-import { OrbitControls, Html, Sphere, useTexture } from "@react-three/drei";
-import { Suspense, useRef } from "react";
+import { OrbitControls, Html, useTexture } from "@react-three/drei";
+import { Suspense, useEffect, useRef, useState } 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 useSphere from "../../store/useSphere";

 const VirtualTourWrapper = () => {
  const orbitRef = useRef<OrbitControlsImpl>(null);
-  const materialRef = useRef<MeshBasicMaterial>(null);
-  const texture = useTexture(
-    "/images/virtual-tour/studio1/Studio1_w-12_13_sp-01.webp"
-  );
+
+  const { setCurrentCompassRotate, currentCompassRotate } = useCompass();
  const { id } = useParams();
+  const [startRotatingPos, setStartRotatingPos] = useState(0);
+  const { selectedSphere, setSelectedSphere } = useSphere();
+  // const [selectedSphere, setSelectedSphere] = useState<IAppartmentSphere>(
+  //   spheres[1]
+  // );
+  useEffect(() => {
+    setSelectedSphere(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);
+    }
+  };

  return (
-    <Suspense fallback={<div>Loading ...</div>}>
-      <Sphere
-        args={[1, 64, 64]}
-        position={[-14.16, 0, 24.11]}
-        scale={[-1, 1, 1]}
-        rotation={[0, Math.PI, 0]}
-      >
-        <meshBasicMaterial
-          ref={materialRef}
-          map={texture}
-          side={BackSide}
-          transparent
+    <Suspense
+      fallback={
+        <Html>
+          <div>Loading</div>
+        </Html>
+      }
+    >
+      {spheres.map((sphere) => (
+        <SphereTour
+          sphere={sphere}
+          selectedSphere={selectedSphere || spheres[0]}
        />
-      </Sphere>
+      ))}
      <OrbitControls
        ref={orbitRef}
        maxDistance={0.001}
        enableZoom={false}
        rotateSpeed={0.5}
        reverseOrbit
-        onChange={() => console.log("e", orbitRef.current?.getAzimuthalAngle())}
+        // onStart={(e) => console.log("e", e)}
+        // onChange={(e) => console.log("e", e?.target)}
+        onChange={handleOnRotating}
        target={[-14.16, 0, 24.11]}
      />
    </Suspense>