feat: Add player marker component with bobbing animation and label
This commit is contained in:
@@ -506,9 +506,58 @@ function MiningArea({ area, turtle, isSelected, onClick }) {
|
||||
);
|
||||
}
|
||||
|
||||
// Player marker component
|
||||
function PlayerMarker({ player }) {
|
||||
const meshRef = useRef();
|
||||
|
||||
// Bobbing animation
|
||||
useFrame((state) => {
|
||||
if (meshRef.current) {
|
||||
meshRef.current.position.y = player.position.y + Math.sin(state.clock.elapsedTime * 2) * 0.1;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<group position={[player.position.x, player.position.y, player.position.z]}>
|
||||
{/* Player head (Steve-like) */}
|
||||
<mesh ref={meshRef} position={[0, 1, 0]}>
|
||||
<boxGeometry args={[0.6, 0.6, 0.6]} />
|
||||
<meshStandardMaterial
|
||||
color="#8b7355"
|
||||
emissive="#4a90e2"
|
||||
emissiveIntensity={0.3}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
{/* Body */}
|
||||
<mesh position={[0, 0.2, 0]}>
|
||||
<boxGeometry args={[0.6, 0.9, 0.3]} />
|
||||
<meshStandardMaterial color="#4a90e2" />
|
||||
</mesh>
|
||||
|
||||
{/* Glow effect */}
|
||||
<pointLight color="#4a90e2" intensity={1} distance={3} />
|
||||
|
||||
{/* Label */}
|
||||
<Text
|
||||
position={[0, 2, 0]}
|
||||
fontSize={0.4}
|
||||
color="#4a90e2"
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
outlineWidth={0.05}
|
||||
outlineColor="#000000"
|
||||
>
|
||||
Player {player.playerID}
|
||||
</Text>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
// Main scene component
|
||||
function Scene() {
|
||||
const turtles = useTurtleStore((state) => state.getTurtleArray());
|
||||
const players = useTurtleStore((state) => Object.values(state.players || {}));
|
||||
const selectedTurtleId = useTurtleStore((state) => state.selectedTurtleId);
|
||||
const selectTurtle = useTurtleStore((state) => state.selectTurtle);
|
||||
const worldBlocks = useTurtleStore((state) => state.worldBlocks || []);
|
||||
|
||||
Reference in New Issue
Block a user