diff --git a/src/components/icons/WalkHereIcon.tsx b/src/components/icons/WalkHereIcon.tsx
new file mode 100644
index 0000000..4ef933c
--- /dev/null
+++ b/src/components/icons/WalkHereIcon.tsx
@@ -0,0 +1,28 @@
+const WalkHereIcon = () => {
+ return (
+
+ );
+};
+
+export default WalkHereIcon;
diff --git a/src/components/virtualTour/LabelMarker.tsx b/src/components/virtualTour/LabelMarker.tsx
new file mode 100644
index 0000000..0d25830
--- /dev/null
+++ b/src/components/virtualTour/LabelMarker.tsx
@@ -0,0 +1,40 @@
+import { Html } from "@react-three/drei";
+import { IAppartmentSphere, ISphereLink } from "../../types/apartmentSphere";
+import WalkHereIcon from "../icons/WalkHereIcon";
+import useSphere from "../../store/useSphere";
+
+interface LaberlMarkerProps {
+ sphereLink: ISphereLink;
+ apartment: IAppartmentSphere;
+}
+
+const LabelMarker = ({ sphereLink, apartment }: LaberlMarkerProps) => {
+ const { setSelectedSphere } = useSphere();
+
+ const handleOnClick = () => {
+ const moveToShpere = apartment.spheres.find(
+ (sph) => sph.id === sphereLink.id
+ );
+ if (moveToShpere) {
+ setSelectedSphere(moveToShpere);
+ }
+ };
+
+ return (
+ <>
+ {
+
+ console.log(sphereLink.id)}
+ onClick={handleOnClick}
+ >
+
+
+
+ }
+
+ );
+};
+
+export default LabelMarker;
diff --git a/src/components/virtualTour/SphereTour.tsx b/src/components/virtualTour/SphereTour.tsx
index faea3b0..2328fd0 100644
--- a/src/components/virtualTour/SphereTour.tsx
+++ b/src/components/virtualTour/SphereTour.tsx
@@ -1,13 +1,13 @@
import { Sphere, useTexture } from "@react-three/drei";
import { useEffect, useRef } from "react";
import { BackSide, MeshBasicMaterial } from "three";
-import { IAppartmentSphere } from "../../types/apartmentSphere";
+import { ISphere } from "../../types/apartmentSphere";
import gsap from "gsap";
// import gsap from "gsap";
interface SphereTourProps {
- sphere: IAppartmentSphere;
- selectedSphere: IAppartmentSphere;
+ sphere: ISphere;
+ selectedSphere: ISphere;
}
const SphereTour = ({ sphere, selectedSphere }: SphereTourProps) => {
diff --git a/src/components/virtualTour/VirtualTourWrapper.tsx b/src/components/virtualTour/VirtualTourWrapper.tsx
index 2265f33..42e35fa 100644
--- a/src/components/virtualTour/VirtualTourWrapper.tsx
+++ b/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(null);
- const { setCurrentCompassRotate, currentCompassRotate } = useCompass();
- const { id } = useParams();
- const [startRotatingPos, setStartRotatingPos] = useState(0);
+ const { setCurrentCompassRotate } = useCompass();
const { selectedSphere, setSelectedSphere } = useSphere();
- // const [selectedSphere, setSelectedSphere] = useState(
- // 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 = () => {