feat: use full space for threejs canvas

seasick · Dec 30, 2023 · 087ced7 · 087ced7
1 parent 7dd8da6
commit 087ced7
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 30 deletions.
diff --git a/src/components/PermanentDrawer.tsx b/src/components/PermanentDrawer.tsx
@@ -11,6 +11,7 @@ import * as React from 'react';
 import config from '../etc/config.json';
 
 const drawerWidth = 340;
+const toolbarHeight = 64; // TODO Will this work everywhere?
 
 type Props = {
   menu?: React.ReactNode;
@@ -51,9 +52,17 @@ export default function PermanentDrawer({ menu, title, children }: Props) {
           <Box sx={{ overflow: 'auto' }}>{menu}</Box>
         </Drawer>
       )}
-      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+      <Box component="main" sx={{ flexGrow: 1, pt: 0 }}>
         <Toolbar />
-        {children}
+        <Box
+          sx={{
+            width: `calc(100vw - ${menu ? drawerWidth : 0}px)`,
+            height: `calc(100vh - ${toolbarHeight}px)`,
+            overflow: 'auto',
+          }}
+        >
+          {children}
+        </Box>
       </Box>
     </Box>
   );

diff --git a/src/components/threeJs/Canvas.tsx b/src/components/threeJs/Canvas.tsx
@@ -18,33 +18,31 @@ type Props = JSX.IntrinsicElements['group'] & {
 
 export default function ThreeJsCanvas({ geometry, onSelect }: Props) {
   return (
-    <div style={{ height: '80vh' }}>
-      <Canvas
-        shadows
-        camera={{
-          fov: 35,
-          zoom: 1.3,
-          near: 0.1,
-          far: 1000,
-          position: [6, 6, 6],
-        }}
-      >
-        <ContactShadows frames={1} />
-        <CameraControls />
-        <Environment />
-        <Center>
-          <Model
-            geometry={geometry}
-            onClick={(e) => {
-              onSelect(e);
-              e.stopPropagation();
-            }}
-          />
-        </Center>
-        <GizmoHelper alignment="bottom-right" margin={[80, 80]}>
-          <GizmoViewcube />
-        </GizmoHelper>
-      </Canvas>
-    </div>
+    <Canvas
+      shadows
+      camera={{
+        fov: 35,
+        zoom: 1.3,
+        near: 0.1,
+        far: 1000,
+        position: [6, 6, 6],
+      }}
+    >
+      <ContactShadows frames={1} />
+      <CameraControls />
+      <Environment />
+      <Center>
+        <Model
+          geometry={geometry}
+          onClick={(e) => {
+            onSelect(e);
+            e.stopPropagation();
+          }}
+        />
+      </Center>
+      <GizmoHelper alignment="bottom-right" margin={[80, 80]}>
+        <GizmoViewcube />
+      </GizmoHelper>
+    </Canvas>
   );
 }