zojgame/IRTH
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

virtual page

Browse Source
This commit is contained in:
zojgame
2024-05-28 12:45:10 +05:00
parent f4cf8a98ab
commit 9a489d64af
12 changed files with 261 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ComplexButtomPanel.tsx → src/components/ButtomPanelCompass.tsx
+4 -4
View File
@@ -1,12 +1,12 @@
import useModal from "../store/useModal";
import useSequence from "../store/useSequence";
import useCompass from "../store/useCompass";
import Button from "./Button";
import DisclaimerIcon from "./icons/DisclaimerIcon";
import DisclaimerModal from "./modals/DisclaimerModal";
const ComplexButtomPanel = () => {
const ButtomPanelCompass = () => {
const { setModal } = useModal();
const { currentCompassRotate } = useSequence();
const { currentCompassRotate } = useCompass();
const handleOnDisclaimerClick = () => {
setModal(<DisclaimerModal />);
@@ -40,4 +40,4 @@ const ComplexButtomPanel = () => {
);
};
export default ComplexButtomPanel;
export default ButtomPanelCompass;
src/components/complexPage/SequenceSlider.tsx
+2 -9
View File
@@ -8,13 +8,11 @@ import { useNavigate } from "react-router-dom";
import Button from "../Button";
import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
import useSequence from "../../store/useSequence";
import useCompass from "../../store/useCompass";
import SequenceHighlighting from "./SequenceHighlighting";
const arrayLength = 360;
const keyframes: number[] = [51, 178, 249, 339];
// const keyframes: number[] = [0, 60, 120, 180, 240, 300];
// const keyframes: number[] = [50, 177, 248, 338];
interface SequenceSliderProps {
path: string;
@@ -28,16 +26,11 @@ function SequenceSlider({ path }: SequenceSliderProps) {
const [isAnimate, setIsAnimate] = useState<boolean>(false);
const [loadedImages, setLoadedImages] = useState<number>(0);
const [keyframeIndex, setKeyframeIndex] = useState<number>(3);
const { setCurrentCompassRotate, currentCompassRotate } = useSequence();
const { setCurrentCompassRotate, currentCompassRotate } = useCompass();
const [width, setWidth] = useState<number>();
const [top, setTop] = useState<number>();
const navigate = useNavigate();
useEffect(() => {
console.log("selectedImageRightIndex", selectedImageRightIndex);
console.log("isAnimate", isAnimate);
}, [selectedImageRightIndex]);
useEffect(() => {
setCurrentCompassRotate(keyframes[3]);
}, []);
src/components/icons/ChevronDownIcon.tsx
+6 -1
View File
@@ -1,6 +1,11 @@
const ChevronDownIcon = () => {
interface ChevronDownIconProps {
className?: string;
}
const ChevronDownIcon = ({ className }: ChevronDownIconProps) => {
return (
<svg
className={`${!className ? "" : className}`}
width="24"
height="24"
viewBox="0 0 24 24"
src/components/virtualTour/SphereTour.tsx
+39
View File
@@ -0,0 +1,39 @@
import { Sphere, useTexture } from "@react-three/drei";
import { useEffect, useRef } from "react";
import { BackSide, MeshBasicMaterial } from "three";
import { IAppartmentSphere } from "../../types/apartmentSphere";
import gsap from "gsap";
// import gsap from "gsap";
interface SphereTourProps {
sphere: IAppartmentSphere;
selectedSphere: IAppartmentSphere;
}
const SphereTour = ({ sphere, selectedSphere }: SphereTourProps) => {
const materialRef = useRef<MeshBasicMaterial>(null);
const texture = useTexture(selectedSphere.sphereImage);
useEffect(() => {
const opacity = Number(selectedSphere.id === sphere.id);
gsap.to(materialRef.current, { opacity, duration: 1 });
}, [selectedSphere, sphere]);
return (
<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>
);
};
export default SphereTour;
src/components/virtualTour/VirtualTourWrapper.tsx
+40 -21
View File
@@ -1,39 +1,58 @@
import { BackSide, MeshBasicMaterial } from "three";
import { OrbitControls, Html, Sphere, useTexture } from "@react-three/drei";
import { Suspense, useRef } from "react";
import { OrbitControls, Html, useTexture } from "@react-three/drei";
import { Suspense, useEffect, useRef, useState } 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 useSphere from "../../store/useSphere";
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 { setCurrentCompassRotate, currentCompassRotate } = useCompass();
const { id } = useParams();
const [startRotatingPos, setStartRotatingPos] = useState(0);
const { selectedSphere, setSelectedSphere } = useSphere();
// const [selectedSphere, setSelectedSphere] = useState<IAppartmentSphere>(
// spheres[1]
// );
useEffect(() => {
setSelectedSphere(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);
}
};
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
<Suspense
fallback={
<Html>
<div>Loading</div>
</Html>
}
>
{spheres.map((sphere) => (
<SphereTour
sphere={sphere}
selectedSphere={selectedSphere || spheres[0]}
/>
</Sphere>
))}
<OrbitControls
ref={orbitRef}
maxDistance={0.001}
enableZoom={false}
rotateSpeed={0.5}
reverseOrbit
onChange={() => console.log("e", orbitRef.current?.getAzimuthalAngle())}
// onStart={(e) => console.log("e", e)}
// onChange={(e) => console.log("e", e?.target)}
onChange={handleOnRotating}
target={[-14.16, 0, 24.11]}
/>
</Suspense>
src/consts/spheres.ts
+41
View File
@@ -0,0 +1,41 @@
import { IAppartmentSphere } from "../types/apartmentSphere";
const spheres: IAppartmentSphere[] = [
{
id: "1",
sphereImage: "/images/virtual-tour/studio1/Studio1_w-12_13_sp-01.webp",
roomType: "room 1",
},
{
id: "2",
sphereImage: "/images/virtual-tour/studio1/Studio1_w-12_13_sp-02.webp",
roomType: "room 2",
},
{
id: "3",
sphereImage: "/images/virtual-tour/studio1/Studio1_w-12_13_sp-03.webp",
roomType: "room 3",
},
{
id: "4",
sphereImage: "/images/virtual-tour/studio1/Studio1_w-12_13_sp-04.webp",
roomType: "room 4",
},
{
id: "5",
sphereImage: "/images/virtual-tour/studio1/Studio1_w-12_13_sp-05.webp",
roomType: "room 5",
},
{
id: "6",
sphereImage: "/images/virtual-tour/studio1/Studio1_w-12_13_sp-06.webp",
roomType: "room 6",
},
{
id: "7",
sphereImage: "/images/virtual-tour/studio1/Studio1_w-12_13_sp-07.webp",
roomType: "room 7",
},
];
export { spheres };
src/pages/Complex.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import ComplexButtomPanel from "../components/ComplexButtomPanel";
import ButtomPanelCompass from "../components/ButtomPanelCompass";
import ComplexTopPanel from "../components/complexPage/ComplexTopPanel";
import SequenceSlider from "../components/complexPage/SequenceSlider";
@@ -7,7 +7,7 @@ const Complex = () => {
<div className="overflow-hidden h-screen w-screen">
<ComplexTopPanel />
<SequenceSlider path={"/images/sequence"} />
<ComplexButtomPanel />
<ButtomPanelCompass />
</div>
);
};
src/pages/ComplexWing.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import ComplexTopPanel from "../components/complexPage/ComplexTopPanel";
import ComplexButtomPanel from "../components/ComplexButtomPanel";
import ButtomPanelCompass from "../components/ButtomPanelCompass";
import SequenceWing from "../components/complexWingPage/SequenceWing";
const ComplexWing = () => {
@@ -7,7 +7,7 @@ const ComplexWing = () => {
<div className="overflow-hidden h-screen w-screen ">
<ComplexTopPanel />
<SequenceWing />
<ComplexButtomPanel />
<ButtomPanelCompass />
</div>
);
};
src/pages/VirtualTour.tsx
+103 -4
View File
@@ -1,14 +1,32 @@
import { useState } from "react";
import { Canvas } from "@react-three/fiber";
import ButtomPanel from "../components/ButtomPanel";
import VirtualTourWrapper from "../components/virtualTour/VirtualTourWrapper";
import Button from "../components/Button";
import HeartIcon from "../components/icons/Heart";
import ChevronDownIcon from "../components/icons/ChevronDownIcon";
import ButtomPanelCompass from "../components/ButtomPanelCompass";
import BookingIcon from "../components/icons/BookingIcon";
import { spheres } from "../consts/spheres";
import { IAppartmentSphere } from "../types/apartmentSphere";
import useSphere from "../store/useSphere";
const VirtualTour = () => {
const [isActive, setIsActive] = useState(false);
const { setSelectedSphere } = useSphere();
const handleOnShowClick = () => {
setIsActive((prev) => !prev);
};
const handleOnLabelClick = (sphere: IAppartmentSphere) => {
setSelectedSphere(sphere);
};
return (
<div className="overflow-hidden h-screen w-screen">
{/* <TopPanel /> */}
<div className="absolute w-screen h-screen grid grid-cols-12 z-30 pointer-events-none">
<div className="col-span-3 h-screen py-[68px] px-3">
<div className="bg-white w-full rounded-lg p-4 flex flex-col">
<div className="bg-white w-full rounded-lg p-5 flex flex-col relative rounded-ee-none">
<div className="flex flex-col gap-1 pb-[18px] border-b">
<p className="text-[#00BED7] text-caption-m font-medium">
Rove Home Marasi Drive{" "}
@@ -25,13 +43,94 @@ const VirtualTour = () => {
<p className="text-caption-m font-semibold leading-4">№ 213</p>
</div>
</div>
<div className="pt-3">
<div className="flex gap-2 items-center">
<div className="bg-[#00BED7] py-[3px] px-2 rounded-full text-white text-caption-m flex items-center h-[22px]">
234
</div>
<p className="text-[#0D1922] font-semibold text-subheadline-s">
1 bedroom appartment
</p>
</div>
<div
className={`transition-all duration-700 ease-in-out ${
!isActive ? "max-h-0 opacity-0" : "max-h-screen opacity-100"
}`}
>
<div className="aspect-square w-full bg-black my-4"></div>
<div className="pt-4 border-t">
<div className="flex flex-col gap-3">
<div className="flex justify-between text-m">
<p className="text-[#73787C]">Size</p>
<p className="text-[#0D1922]">609 Sqft</p>
</div>
<div className="flex justify-between text-m">
<p className="text-[#73787C]">Status</p>
<p className="text-[#0D1922]">Available</p>
</div>
</div>
</div>
</div>
<div className="flex gap-2 pt-6">
<Button
icon={<BookingIcon />}
text="Send Enquiry"
buttonType="cta"
className="flex-1 flex items-center justify-center"
/>
<Button icon={<HeartIcon />} buttonType="secondary" />
</div>
</div>
<div className="h-14 absolute -bottom-14 left-0 w-full flex justify-between">
<div className="flex gap-1 py-2 items-start flex-wrap">
{spheres.map((sphere) => {
return (
<div
onClick={() => handleOnLabelClick(sphere)}
className="bg-[#F3F3F2] font-semibold text-[#0D1922] text-caption-s py-0.5 px-2 w-fit rounded-full cursor-pointer pointer-events-auto select-none"
key={sphere.id}
>
{sphere.roomType}
</div>
);
})}
</div>
<div className="transition-all duration-300 bg-[#FFFFFFCC] px-4 py-3 w-fit h-12 rounded-ee-lg rounded-es-lg select-none cursor-pointer pointer-events-auto items-start border border-t-[#0D1922B2] active:border-[#00BED7] hover:bg-[#FFFFFF] text-[#0D1922B2] hover:text-[#0D1922]">
<div
className="flex justify-center items-center gap-2"
onClick={handleOnShowClick}
>
<div className="relative">
<div
className={`transition-opacity duration-300 ${
!isActive ? "opacity-100" : "opacity-0"
}`}
>
Show
</div>
<div
className={`transition-opacity duration-300 absolute top-0 ${
!isActive ? "opacity-0" : "opacity-100"
}`}
>
Hide
</div>
</div>
<ChevronDownIcon
className={`transition-all duration-300 ${
!isActive ? "rotate-0" : "rotate-180"
}`}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<Canvas>
<VirtualTourWrapper />
</Canvas>
<ButtomPanel />
<ButtomPanelCompass />
</div>
);
};
src/store/useSequence.tsx → src/store/useCompass.tsx
+2 -2
View File
@@ -5,10 +5,10 @@ interface SequenceStore {
setCurrentCompassRotate: (keyframe: number) => void;
}
const useSequence = create<SequenceStore>((set) => ({
const useCompass = create<SequenceStore>((set) => ({
currentCompassRotate: 0,
setCurrentCompassRotate: (keyframe) =>
set(() => ({ currentCompassRotate: keyframe })),
}));
export default useSequence;
export default useCompass;
src/store/useSphere.tsx
+13
View File
@@ -0,0 +1,13 @@
import { create } from "zustand";
import { IAppartmentSphere } from "../types/apartmentSphere";
interface SequenceStore {
selectedSphere: null | IAppartmentSphere;
setSelectedSphere: (sphere: null | IAppartmentSphere) => void;
}
const useSphere = create<SequenceStore>((set) => ({
selectedSphere: null,
setSelectedSphere: (sphere) => set(() => ({ selectedSphere: sphere })),
}));
export default useSphere;
src/types/apartmentSphere.ts
+7
View File
@@ -0,0 +1,7 @@
interface IAppartmentSphere {
id: string;
sphereImage: string;
roomType: string;
}
export type { IAppartmentSphere };