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(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 (
Loading
} > {appartment.spheres.map((sphere) => { const isLabelContains = selectedSphere && sphere.id === selectedSphere.id; return ( <> {isLabelContains && sphere.links.map((sphereLink) => ( ))} ); })} console.log("e", e)} // onChange={(e) => console.log("e", e?.target)} onChange={handleOnRotating} target={appartment.spheres[0].position} /> ); }; export default VirtualTourWrapper;