feat: track turning

src/app/tools/tankopedia/[id]/components/HullContainer.tsx

@@ -1,6 +1,6 @@
 import { ThreeEvent, useThree } from '@react-three/fiber';
 import { ReactNode, forwardRef, useImperativeHandle, useRef } from 'react';
-import { Group, Mesh, Object3D } from 'three';
+import { Group, Mesh, MeshStandardMaterial, Object3D, Vector2 } from 'three';
 import { resolveJsxTree } from '../../../../../core/blitzkrieg/resolveJsxTree';
 import { normalizeAnglePI } from '../../../../../core/math/normalizeAngle180';
 
@@ -10,10 +10,15 @@ interface HullContainerProps {
   objects: Object3D[];
   onYawStart: () => void;
   onYawEnd: (yaw: number) => void;
+  onTrackStart: () => void;
+  onTrackEnd: () => void;
 }
 
 export const HullContainer = forwardRef<Group, HullContainerProps>(
-  ({ children, yaw, objects, onYawStart, onYawEnd }, ref) => {
+  (
+    { children, yaw, objects, onYawStart, onYawEnd, onTrackEnd, onTrackStart },
+    ref,
+  ) => {
     const canvas = useThree((state) => state.gl.domElement);
     const hullContainer = useRef<Group>(null);
 
@@ -31,13 +36,19 @@ export const HullContainer = forwardRef<Group, HullContainerProps>(
           function handlePointerDown(event: ThreeEvent<PointerEvent>) {
             event.stopPropagation();
 
-            draftHullYaw = yaw;
+            if (isHull) {
+              draftHullYaw = yaw;
 
-            onYawStart();
+              onYawStart();
-            window.addEventListener('pointermove', handlePointerMove);
+              window.addEventListener('pointermove', handlePointerMoveHull);
-            window.addEventListener('pointerup', handlePointerUp);
+              window.addEventListener('pointerup', handlePointerUpHull);
+            } else if (isTrack) {
+              onTrackStart();
+              window.addEventListener('pointermove', handlePointerMoveTrack);
+              window.addEventListener('pointerup', handlePointerUpTrack);
+            }
           }
-          function handlePointerMove(event: PointerEvent) {
+          function handlePointerMoveHull(event: PointerEvent) {
             event.preventDefault();
 
             draftHullYaw += event.movementX * ((2 * Math.PI) / canvas.width);
@@ -46,10 +57,30 @@ export const HullContainer = forwardRef<Group, HullContainerProps>(
               hullContainer.current.rotation.z = draftHullYaw;
             }
           }
-          function handlePointerUp() {
+          function handlePointerUpHull() {
             onYawEnd(normalizeAnglePI(draftHullYaw));
-            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointermove', handlePointerMoveHull);
-            window.removeEventListener('pointerup', handlePointerUp);
+            window.removeEventListener('pointerup', handlePointerUpHull);
+          }
+          function handlePointerMoveTrack(event: PointerEvent) {
+            event.preventDefault();
+
+            const mesh = object as Mesh;
+            const material = mesh.material as MeshStandardMaterial;
+            const offset = new Vector2(
+              0,
+              -event.movementY * (6 / canvas.height) +
+                event.movementX * (6 / canvas.width),
+            );
+
+            material.map?.offset.add(offset);
+            material.roughnessMap?.offset.add(offset);
+            material.normalMap?.offset.add(offset);
+          }
+          function handlePointerUpTrack() {
+            onTrackEnd();
+            window.removeEventListener('pointermove', handlePointerMoveTrack);
+            window.removeEventListener('pointerup', handlePointerUpTrack);
           }
 
           if (!isVisible) return null;

src/app/tools/tankopedia/[id]/page.tsx

@@ -146,6 +146,8 @@ export default function Page({ params }: { params: { id: string } }) {
                       setControlsEnabled(true);
                       setHullYaw(yaw);
                     }}
+                    onTrackStart={() => setControlsEnabled(false)}
+                    onTrackEnd={() => setControlsEnabled(true)}
                   >
                     <TurretContainer
                       gunOrigin={gunOrigin}