simple test = performance issues

src/Editor.tsx

@@ -2,8 +2,6 @@ import { OrbitControls, Stats } from "drei";
 import React from "react";
 import { Canvas } from "react-three-fiber";
 import { DoubleSide, PCFSoftShadowMap, Uncharted2ToneMapping } from "three";
-import Building from "./building/Building";
-import InfoPanel from "./info/InfoPanel";
 import RectangularGrid from "./shared/RectangularGrid";
 import { useStore } from "./shared/store";
 
@@ -57,7 +55,7 @@ const Editor: React.FC = () => (
           />
         </mesh>
       </group>
-      <Building />
+      {/* <Building /> */}
       <OrbitControls
         target={[0, 1, 0] as any}
         rotateSpeed={0.7}
@@ -67,7 +65,6 @@ const Editor: React.FC = () => (
       />
       {process.env.REACT_APP_DEBUG && <Stats />}
     </Canvas>
-    <InfoPanel />
   </>
 );
 

src/building/Building.tsx

@@ -1,37 +1,18 @@
-import React, { useState } from "react";
-import { State, useStore } from "../shared/store";
-import Module from "./Module";
+import React from "react";
+import { useStore } from "../shared/store";
+import { current } from "../utils/undoable";
 
-const Building: React.FC = () => {
-  const [hovering, setHovering] = useState(undefined);
-
-  const {
-    properties: {
-      dimensions: { cellWidth, cellLength },
-    },
-    occupiedCells,
-  } = useStore((store) => store.grid);
+const Building: React.FC<{ index: number }> = ({ index }) => {
+  // get the first coordinate of the hangar to determine the building's position
+  const { x, z } = useStore((store) => current(store.hangars)[index][0]);
 
   return (
-    <>
-      <group position={[0, 0.01, 0]}>
-        {Object.entries(occupiedCells as State["grid"]["occupiedCells"]).map(
-          ([gridPosition, cellData]) => (
-            <Module
-              key={gridPosition}
-              gridPosition={gridPosition}
-              cellWidth={cellWidth}
-              cellLength={cellLength}
-              type={cellData.module}
-              setHovering={setHovering}
-            />
-          )
-        )}
-      </group>
-      {hovering && (
-        <arrowHelper args={[hovering[0], hovering[1], 2, 0x00ff00]} />
-      )}
-    </>
+    <group position={[1000, 500, z]}>
+      <mesh>
+        <boxBufferGeometry args={[1000, 1000, 1000]} attach="geometry" />
+        <meshBasicMaterial color="red" attach="material" />
+      </mesh>
+    </group>
   );
 };
 

src/hangar/index.tsx

@@ -2,6 +2,7 @@ import { OrbitControls } from "drei";
 import React from "react";
 import { Canvas, CanvasContext, PointerEvent } from "react-three-fiber";
 import * as three from "three";
+import Building from "../building/Building";
 import grid from "../shared/grid";
 import RectangularGrid from "../shared/RectangularGrid";
 import {
@@ -49,9 +50,7 @@ const matchingIndices = (
   );
 };
 
-const { x: gridX, z: gridZ } = grid("m");
-
-const gridY = 4;
+const { x: gridX, z: gridZ, y: gridY } = grid("mm");
 
 const snapToGridX = (val: number): number => Math.round(val / gridX) * gridX;
 const snapToGridZ = (val: number): number => Math.round(val / gridZ) * gridZ;
@@ -432,18 +431,19 @@ const Container: React.FunctionComponent<{}> = () => {
         onEditModeChange={setEditMode}
       />
       <Canvas
-        gl={{ antialias: true, alpha: true }}
+        gl={{ antialias: true, alpha: true, powerPreference: "low-power" }}
         onCreated={(threeContext) => {
           setThreeContext(threeContext);
           threeContext.gl.toneMapping = three.Uncharted2ToneMapping;
-          threeContext.camera.position.set(50, 70, -24);
+          threeContext.camera.position.set(-13000, 20000, -15000);
           threeContext.camera.lookAt(0, 0, 0);
           threeContext.camera.updateProjectionMatrix();
+          window["camera"] = threeContext.camera;
         }}
         camera={{
           near: 1,
-          far: 120,
-          zoom: 40,
+          far: 12e5,
+          zoom: 0.035,
         }}
         orthographic
         {...dragContainerAttrs}
@@ -457,19 +457,24 @@ const Container: React.FunctionComponent<{}> = () => {
           numXCells={60}
           cellLength={gridZ}
           cellWidth={gridX}
-          color="#F3F3F3"
+          color={0xcccccc}
         />
+
         <raycast.Planes refs={raycasting.refs} />
+
         <OrbitControls
           enableRotate={!hovered}
-          enablePan={!hovered}
-          minPolarAngle={Math.PI / 8}
-          maxPolarAngle={(Math.PI * 7) / 8}
-          target={new three.Vector3(0, 0, 0)}
+          enablePan={false}
+          // minPolarAngle={Math.PI / 8}
+          // maxPolarAngle={(Math.PI * 7) / 8}
           enableDamping
           dampingFactor={0.2}
           rotateSpeed={0.7}
+          zoomSpeed={10}
+          minZoom={0.025}
+          maxZoom={0.1}
         />
+
         {editMode === EditMode.Insert && ghostHangar && (
           <HangarMesh hangar={ghostHangar} />
         )}
@@ -488,6 +493,8 @@ const Container: React.FunctionComponent<{}> = () => {
 
           return (
             <React.Fragment key={hangarIndex}>
+              <Building index={hangarIndex} />
+
               <mesh
                 geometry={
                   new three.PlaneBufferGeometry(cubeMod.wx, cubeMod.wz, 1, 1)
@@ -637,6 +644,7 @@ const Container: React.FunctionComponent<{}> = () => {
             </React.Fragment>
           );
         })}
+        <axesHelper args={[10000]} />
       </Canvas>
     </div>
   );