feat(camera-controls): correct for rotation.

package.json

@@ -4,30 +4,30 @@
   "dependencies": {
     "query-string": "7.1.3",
     "querystring": "0.2.1",
-    "react-router": "6.8.0",
-    "react-router-dom": "6.8.0",
-    "@react-three/fiber": "8.10.2",
-    "@types/three": "0.149.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",    
+    "react-router": "6.6.2",
+    "react-router-dom": "6.6.2",
+    "@react-three/fiber": "8.10.0",
+    "@types/three": "0.148.0",
     "react-scripts": "4.0.3",
-    "three": "0.149.0",
-    "typescript": "4.9.5"
+    "three": "0.148.0",
+    "typescript": "4.9.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.5",
-    "@babel/preset-react": "^7.14.5",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
     "source-map-loader": "^0.2.4",
-    "ts-loader": "^6.2.1",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^5.2.6",
+    "ts-loader": "^9.4.2",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
     "html-webpack-plugin": "^5.3.1",
     "style-loader": "^2.0.0",
     "webpack": "5.75.0",
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "^3.11.2",
-    "@types/react": "18.0.27",
+    "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "typescript": "4.9.5"
   },

src/components/BufferedBox.tsx

@@ -23,7 +23,7 @@ const getMaterial = (isChameleon: boolean | undefined, textures: Texture[] | und
     if (isChameleon) {
         return (<meshNormalMaterial attach='material' />);
     } else if (textures) {
-        return textures.map((texture, i) => <meshBasicMaterial attachArray="material" map={texture} key={'BufferedBox_MaterialTexture'+i} />);
+        return textures.map((texture, i) => <meshBasicMaterial attach="material" map={texture} key={'BufferedBox_MaterialTexture'+i} />);
     } else {
         return (<meshLambertMaterial attach='material' color={colour} />);
     }

src/components/Floor.tsx

@@ -71,11 +71,11 @@ export default function Floor() {
         <instancedMesh
             ref={ref}
             args={[undefined, undefined, floorTiles.floorTiles.length]}
-            onPointerDown={(e) => console.log('down', e.point.x, '-', e.point.z)}
-            onPointerMove={(e) => console.log('move', e.point.x, '-', e.point.z)}
+            // onPointerDown={(e) => console.log('down', e.point.x, '-', e.point.z)}
+            // onPointerMove={(e) => console.log('move', e.point.x, '-', e.point.z)}
             >
             <planeBufferGeometry args={[cellWidth, cellHeight]} >
-                <instancedBufferAttribute attachObject={['attributes', 'color']} args={[colorArray, 3]} />
+                <instancedBufferAttribute attach="attributes-color" args={[colorArray, 3]} />
             </planeBufferGeometry>
             {/* <boxBufferGeometry args={[cellWidth, 0.05, cellHeight]}>
                 <instancedBufferAttribute attachObject={['attributes', 'color']} args={[colorArray, 3]} />

src/components/SceneCamera/CameraControls.tsx

@@ -11,22 +11,48 @@ interface CameraControlsProps {
 }
 
 export const CameraControls = ({outerWindow, updateCameraX, updateCameraY, resetCameraPosition, update3DState, updateGridRotation, gridRotation}: CameraControlsProps) => {
+    const cameraStep = 5;
+    const direction = {
+        up: "up",
+        right: "right",
+        down: "down",
+        left: "left"
+    }
+
+    const updateCamera = (key: string) => {
+        // first check if the camera has been rotated and convert this into a quadrant 0 to 3 (to use with an index later)
+        const absoluteQuadrant = (Math.abs(gridRotation) / 90) % 4; // 0 -> 0 ; 90 -> 1 ; 180 -> 2 ; 270 -> 3
+        const clockwiseQuadrant = (gridRotation < 0) ? -absoluteQuadrant +4 : absoluteQuadrant; 
+        // each time the camera is rotate 90° more, the pattern of method to call (and step) shift one along
+        const updateCameraActions = [
+            {method: updateCameraY, step: cameraStep},  // up at 0°,    left at 90°,  down at 18°,   right at 270°
+            {method: updateCameraX, step: cameraStep},  // right at 0°, up at 90°,    left at 180°,  down at 270°
+            {method: updateCameraY, step: -cameraStep}, // down at 0°,  right at 90°, up at 180°,    left at 270°
+            {method: updateCameraX, step: -cameraStep}, // left at 0°,  down at 90°,  right at 180°, up at 270°
+        ];
+        // key passed in corresponds directly to camera actions, if camera hasn't been rotated
+        const directionActionIndex = {[direction.up]: 0, [direction.right]: 1, [direction.down]: 2, [direction.left]: 3 };
+        // then we can correct for the rotation of the camera and call the correct action with the correct step
+        const actionIndex = (directionActionIndex[key] + clockwiseQuadrant) % 4;
+        const actionItem = updateCameraActions[actionIndex];
+        actionItem.method(actionItem.step);
+    }
 
     return (
         <div className="CameraControls_Panel" style={{top: outerWindow.height - 100, left: outerWindow.width - 100}} >
             <div className="CameraControls_Buttons">
                 <button onClick={() => update3DState(false)}><small>2D</small></button>
-                <button onClick={() => updateCameraY(5)}>{"\u25B2"}</button>
+                <button onClick={() => updateCamera(direction.up)}>{"\u25B2"}</button>
                 <button onClick={() => update3DState(true)}><small>3D</small></button>
-                <button onClick={() => updateCameraX(-5)}>{"\u25C0"}</button>
+                <button onClick={() => updateCamera(direction.left)}>{"\u25C0"}</button>
                 <button 
                   className="CameraControl_ResetButton"
                   style={{transform: `rotate(${360 - gridRotation}deg)`, transition: 'transform 150ms ease'}} 
                   onClick={() => resetCameraPosition()}>{"\u221F"}</button>
                 {/* <button onClick={() => resetCameraPosition()}>{"\u229B"}</button> */}
-                <button onClick={() => updateCameraX(5)}>{"\u25B6"}</button>
+                <button onClick={() => updateCamera(direction.right)}>{"\u25B6"}</button>
                 <button onClick={() => updateGridRotation(90)}>{"\u21AA"}</button>
-                <button onClick={() => updateCameraY(-5)}>{"\u25BC"}</button>
+                <button onClick={() => updateCamera(direction.down)}>{"\u25BC"}</button>
                 <button onClick={() => updateGridRotation(-90)}>{"\u21A9"}</button>
             </div>
         </div>

src/components/UpdateableBufferAttribute/UpdateableBufferAttribute.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
 interface UpdateableBufferAttributeProps {
-    attachObject: [target: string, name: string];
+    attachObject: string;//[target: string, name: string];
     array: Float32Array;
     count: number;
     itemSize: number;
@@ -19,7 +19,8 @@ const UpdateableBufferAttribute: React.FunctionComponent<UpdateableBufferAttribu
     count,
     itemSize
 }: UpdateableBufferAttributeProps) => {
-    const ref = useRef<THREE.BufferAttribute>();
+    // const ref = useRef<THREE.BufferAttribute>();
+    const ref = useRef<THREE.BufferAttribute>() as React.MutableRefObject<THREE.BufferAttribute | null>;
 
     useEffect(() => {
         if (ref.current) {
@@ -29,7 +30,7 @@ const UpdateableBufferAttribute: React.FunctionComponent<UpdateableBufferAttribu
 
     return (
         <bufferAttribute
-            attachObject={attachObject}
+            attach={attachObject}
             array={array}
             itemSize={itemSize}
             count={count}