virtual tour page

src/components/virtualTour/VirtualTourWrapper.tsx

@@ -0,0 +1,43 @@
+import { BackSide, MeshBasicMaterial } from "three";
+import { OrbitControls, Html, Sphere, useTexture } from "@react-three/drei";
+import { Suspense, useRef } from "react";
+import { OrbitControls as OrbitControlsImpl } from "three-stdlib";
+import { useParams } from "react-router-dom";
+
+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 { id } = useParams();
+
+  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
+        />
+      </Sphere>
+      <OrbitControls
+        ref={orbitRef}
+        maxDistance={0.001}
+        enableZoom={false}
+        rotateSpeed={0.5}
+        reverseOrbit
+        onChange={() => console.log("e", orbitRef.current?.getAzimuthalAngle())}
+        target={[-14.16, 0, 24.11]}
+      />
+    </Suspense>
+  );
+};
+
+export default VirtualTourWrapper;