MayaTheShy/remoteturtle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Adjust turtle rotation logic for Three.js to correctly align based on facing direction

Browse Source
This commit is contained in:
MayaTheShy
2026-02-20 00:35:21 -05:00
parent af2d120baa
commit 6b45682fac
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/Map3D.jsx
View File

@@ -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' :