diff --git a/client/src/components/Map3D.jsx b/client/src/components/Map3D.jsx index 30c4315..c4eb514 100644 --- a/client/src/components/Map3D.jsx +++ b/client/src/components/Map3D.jsx @@ -138,8 +138,13 @@ function TurtleModel({ turtle, isSelected, onClick }) { if (!position) return null; // Calculate rotation based on facing (0=North(-Z), 1=East(+X), 2=South(+Z), 3=West(-X)) - // Add 180 degrees (Math.PI) to face the head forward initially, then apply facing rotation - const rotation = facing !== undefined ? [0, (facing * Math.PI / 2) + Math.PI, 0] : [0, Math.PI, 0]; + // In Three.js, 0 rotation faces +Z, so we need to adjust: + // facing 0 (North/-Z) = rotate 180° = Math.PI + // facing 1 (East/+X) = rotate 270° = -Math.PI/2 + // facing 2 (South/+Z) = rotate 0° = 0 + // facing 3 (West/-X) = rotate 90° = Math.PI/2 + const facingRotations = [Math.PI, -Math.PI/2, 0, Math.PI/2]; + const rotation = facing !== undefined ? [0, facingRotations[facing], 0] : [0, 0, 0]; const color = mode === 'mining' ? '#4ade80' : mode === 'exploring' ? '#60a5fa' :