Spaces:
Sleeping
Sleeping
File size: 1,774 Bytes
ed482ba 7f7b2cc 5da26d8 ed482ba 7f7b2cc 5da26d8 ed482ba 7f7b2cc 5da26d8 7f7b2cc ed482ba 5da26d8 7f7b2cc ed482ba 5438f67 a668dda 40a6d5e ed482ba 7f7b2cc 5da26d8 ed482ba 7f7b2cc 5da26d8 7f7b2cc ed482ba 5da26d8 ed482ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
"use client";
import { useLoader } from "@react-three/fiber";
import { TextureLoader } from "three";
import { Rotations, FacingDirection } from "./consts";
import { useState } from "react";
type RotationPanelProps = {
direction: "clockwise" | "counter-clockwise";
facingDirection: FacingDirection;
onClick?: (
facingDirection: FacingDirection,
direction: "clockwise" | "counter-clockwise",
) => void;
};
export const RotationPanel = ({
direction,
facingDirection,
onClick,
}: RotationPanelProps) => {
const clockwise = direction === "clockwise";
const texture = useLoader(TextureLoader, `/textures/${direction}.png`);
const [opacity, setOpacity] = useState(0);
const position: Record<FacingDirection, [number, number, number]> = {
front: clockwise ? [0.5, 0, 1.01] : [-0.5, 0, 1.01],
back: clockwise ? [-0.5, 0, -1.01] : [0.5, 0, -1.01],
left: clockwise ? [-1.01, 0, 0.5] : [-1.01, 0, -0.5],
right: clockwise ? [1.01, 0, -0.5] : [1.01, 0, 0.5],
top: clockwise ? [0.5, 1.01, 0] : [-0.5, 1.01, 0],
bottom: clockwise ? [0.5, -1.01, 0] : [-0.5, -1.01, 0],
};
const handleClick = () => {
onClick?.(facingDirection, direction);
};
return (
<mesh
position={position[facingDirection]}
rotation={Rotations[facingDirection]}
onPointerEnter={() => {
setOpacity(1);
document.body.style.cursor = "pointer";
}}
onPointerLeave={() => {
setOpacity(0);
document.body.style.cursor = "default";
}}
onClick={handleClick}
>
<planeGeometry args={[0.8, 1.6]} />
<meshStandardMaterial
color={"#aaaaaa"}
roughness={0.5}
opacity={opacity}
map={texture}
transparent
/>
</mesh>
);
};
|