Spaces:
Sleeping
Sleeping
File size: 1,674 Bytes
1afe868 ed482ba 1afe868 ed482ba 7f7b2cc 9d0c4b5 ed482ba 1afe868 ed482ba 5da26d8 7f7b2cc ed482ba 5438f67 a668dda 40a6d5e ed482ba 7f7b2cc 1afe868 5da26d8 ed482ba 7f7b2cc 5da26d8 1afe868 5da26d8 1afe868 5da26d8 7f7b2cc ed482ba 1afe868 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 |
'use client';
import { useLoader } from '@react-three/fiber';
import { useState } from 'react';
import { TextureLoader } from 'three';
import { FacingDirection, RotationDirection, RotationStep, Rotations } from './consts';
type RotationPanelProps = {
facingDirection: FacingDirection;
direction: RotationDirection;
onClick?: (step: RotationStep) => void;
};
export const RotationPanel = ({ facingDirection, direction, 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?.({ faceDirection: 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>
);
};
|