73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
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();
|
|
|
|
useEffect(() => {
|
|
setSelectedSphere(appartment.spheres[0]);
|
|
}, []);
|
|
|
|
const handleOnRotating = () => {
|
|
const radian = orbitRef.current?.getAzimuthalAngle();
|
|
if (radian) {
|
|
const currentCompasDegrees = (radian * 180) / Math.PI + 180;
|
|
setCurrentCompassRotate(currentCompasDegrees);
|
|
}
|
|
};
|
|
|
|
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;
|