Spaces:
Running
Running
File size: 1,869 Bytes
1afe868 ed482ba 1afe868 ba7c9fe 1afe868 ed482ba 7f7b2cc 9d0c4b5 ed482ba 1afe868 ba7c9fe 1afe868 ed482ba 5da26d8 7f7b2cc ed482ba 5438f67 a668dda 8d694b6 ed482ba 7f7b2cc 1afe868 5da26d8 ed482ba 7f7b2cc 5da26d8 1afe868 5da26d8 1afe868 5da26d8 7f7b2cc ed482ba ba7c9fe 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 |
'use client';
import { useLoader } from '@react-three/fiber';
import { useState } from 'react';
import { TextureLoader } from 'three';
import { useControlContext } from '@/contexts/control-context';
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 { showRotationIndicators } = useControlContext();
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],
up: clockwise ? [0.5, 1.01, 0] : [-0.5, 1.01, 0],
down: 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={showRotationIndicators ? 1 : opacity}
map={texture}
transparent
/>
</mesh>
);
};
|