75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import { OrbitControls } from "@react-three/drei";
|
|
import { Fragment, useEffect, useRef } from "react";
|
|
import { OrbitControls as OrbitControlsImpl } from "three-stdlib";
|
|
import useCompass from "../../store/useCompass";
|
|
import SphereTour from "./SphereTour";
|
|
import { IAppartmentComplex } from "../../types/apartmentSphere";
|
|
import useSphere from "../../store/useSphere";
|
|
import LabelMarker from "./LabelMarker";
|
|
|
|
interface VirtualTourWrapperProps {
|
|
appartment: IAppartmentComplex;
|
|
}
|
|
|
|
const VirtualTourWrapper = ({ appartment }: VirtualTourWrapperProps) => {
|
|
const orbitRef = useRef<OrbitControlsImpl>(null);
|
|
|
|
const { setCurrentCompassRotate } = useCompass();
|
|
const { selectedSphere, setSelectedSphere } = useSphere();
|
|
|
|
const handleOnRotating = () => {
|
|
const radian = orbitRef.current?.getAzimuthalAngle();
|
|
if (radian) {
|
|
const currentCompasDegrees = (radian * 180) / Math.PI + 180;
|
|
setCurrentCompassRotate(currentCompasDegrees);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
setSelectedSphere(appartment.spheres[0]);
|
|
}, [appartment.spheres, setSelectedSphere]);
|
|
|
|
return (
|
|
<>
|
|
{appartment.spheres.map((sphere) => {
|
|
const isLabelContains =
|
|
selectedSphere && sphere.id === selectedSphere.id;
|
|
|
|
return (
|
|
<Fragment key={sphere.id}>
|
|
{isLabelContains &&
|
|
sphere.links.map((sphereLink) => (
|
|
<LabelMarker
|
|
sphereLink={sphereLink}
|
|
apartment={appartment}
|
|
key={sphereLink.id}
|
|
/>
|
|
))}
|
|
<SphereTour
|
|
sphere={sphere}
|
|
selectedSphere={
|
|
selectedSphere ? selectedSphere : appartment.spheres[0]
|
|
}
|
|
/>
|
|
</Fragment>
|
|
);
|
|
})}
|
|
<OrbitControls
|
|
ref={orbitRef}
|
|
maxDistance={0.001}
|
|
enableZoom={false}
|
|
rotateSpeed={0.5}
|
|
reverseOrbit
|
|
onChange={handleOnRotating}
|
|
target={[
|
|
appartment.spheres[0].position[0],
|
|
appartment.spheres[0].position[1],
|
|
appartment.spheres[0].position[2],
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default VirtualTourWrapper;
|