set default camera position based on board size, and make it higher (#…

…166) * set default camera position based on board size, and make it higher * remove remotion
tscircuit · Feb 9, 2025 · cc5d4e3 · cc5d4e3
1 parent 59efa70
commit cc5d4e3
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 74 deletions.
diff --git a/src/CadViewer.tsx b/src/CadViewer.tsx
@@ -40,22 +40,38 @@ export const CadViewer = forwardRef<
   }>(null)
   circuitJson ??= useConvertChildrenToSoup(children, circuitJson) as any
 
-  if (!circuitJson) return null
+  const initialCameraPosition = useMemo(() => {
+    if (!circuitJson) return [5, 5, 5] as const
+    try {
+      const board = su(circuitJson as any).pcb_board.list()[0]
+      if (!board) return [5, 5, 5] as const
+      const { width, height } = board
+      const largestDim = Math.max(width, height)
+      return [largestDim / 2, largestDim / 2, largestDim] as const
+    } catch (e) {
+      console.error(e)
+      return [5, 5, 5] as const
+    }
+  }, [circuitJson])
 
   const boardGeom = useMemo(() => {
+    if (!circuitJson) return null
     if (!circuitJson.some((e) => e.type === "pcb_board")) return null
     return createBoardGeomFromSoup(circuitJson)
   }, [circuitJson])
 
   const { stls: boardStls, loading } = useStlsFromGeom(boardGeom)
 
+  if (!circuitJson) return null
+
   const cad_components = su(circuitJson).cad_component.list()
 
   return (
     <CadViewerContainer
       ref={ref}
       hoveredComponent={hoveredComponent}
       autoRotateDisabled={autoRotateDisabled}
+      initialCameraPosition={initialCameraPosition}
     >
       {boardStls.map(({ stlUrl, color }, index) => (
         <STLModel

diff --git a/src/CadViewerContainer.tsx b/src/CadViewerContainer.tsx
@@ -23,86 +23,97 @@ interface Props {
     mousePosition: [number, number, number]
   } | null
   autoRotateDisabled?: boolean
+  initialCameraPosition?: readonly [number, number, number] | undefined
 }
 
 export const CadViewerContainer = forwardRef<
   THREE.Object3D,
   React.PropsWithChildren<Props>
->(({ children, hoveredComponent, autoRotateDisabled }, ref) => {
-  return (
-    <div style={{ position: "relative", width: "100%", height: "100%" }}>
-      <div
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: 120,
-          height: 120,
-        }}
-      >
-        <Canvas
-          camera={{
-            up: [0, 0, 1],
-            position: [1, 1, 1],
+>(
+  (
+    {
+      children,
+      hoveredComponent,
+      initialCameraPosition = [5, 5, 5],
+      autoRotateDisabled,
+    },
+    ref,
+  ) => {
+    return (
+      <div style={{ position: "relative", width: "100%", height: "100%" }}>
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: 120,
+            height: 120,
           }}
-          style={{ zIndex: 10 }}
         >
-          <ambientLight intensity={Math.PI / 2} />
-          <CubeWithLabeledSides />
-        </Canvas>
-      </div>
-      <Canvas
-        scene={{ up: [0, 0, 1] }}
-        camera={{ up: [0, 0, 1], position: [5, 5, 5] }}
-      >
-        <RotationTracker />
-        <OrbitControls autoRotate={!autoRotateDisabled} autoRotateSpeed={1} />
-        <ambientLight intensity={Math.PI / 2} />
-        <pointLight
-          position={[-10, -10, 10]}
-          decay={0}
-          intensity={Math.PI / 4}
-        />
-        <Grid
-          rotation={[Math.PI / 2, 0, 0]}
-          infiniteGrid={true}
-          cellSize={1}
-          sectionSize={10}
-        />
-        <object3D ref={ref}>{children}</object3D>
-        {hoveredComponent && (
-          <Html
-            position={hoveredComponent.mousePosition}
-            style={{
-              fontFamily: "sans-serif",
-              transform: "translate3d(50%, 50%, 0)",
-              backgroundColor: "white",
-              padding: "5px",
-              borderRadius: "3px",
-              pointerEvents: "none",
-              userSelect: "none",
-              WebkitUserSelect: "none",
-              MozUserSelect: "none",
-              msUserSelect: "none",
+          <Canvas
+            camera={{
+              up: [0, 0, 1],
+              position: [1, 1, 1],
             }}
+            style={{ zIndex: 10 }}
           >
-            {hoveredComponent.name}
-          </Html>
-        )}
-      </Canvas>
-      <div
-        style={{
-          position: "absolute",
-          right: 24,
-          bottom: 24,
-          fontFamily: "sans-serif",
-          color: "white",
-          WebkitTextStroke: "0.5px rgba(0, 0, 0, 0.5)",
-          fontSize: 11,
-        }}
-      >
-        @{packageJson.version}
+            <ambientLight intensity={Math.PI / 2} />
+            <CubeWithLabeledSides />
+          </Canvas>
+        </div>
+        <Canvas
+          scene={{ up: [0, 0, 1] }}
+          camera={{ up: [0, 0, 1], position: initialCameraPosition }}
+        >
+          <RotationTracker />
+          <OrbitControls autoRotate={!autoRotateDisabled} autoRotateSpeed={1} />
+          <ambientLight intensity={Math.PI / 2} />
+          <pointLight
+            position={[-10, -10, 10]}
+            decay={0}
+            intensity={Math.PI / 4}
+          />
+          <Grid
+            rotation={[Math.PI / 2, 0, 0]}
+            infiniteGrid={true}
+            cellSize={1}
+            sectionSize={10}
+          />
+          <object3D ref={ref}>{children}</object3D>
+          {hoveredComponent && (
+            <Html
+              position={hoveredComponent.mousePosition}
+              style={{
+                fontFamily: "sans-serif",
+                transform: "translate3d(50%, 50%, 0)",
+                backgroundColor: "white",
+                padding: "5px",
+                borderRadius: "3px",
+                pointerEvents: "none",
+                userSelect: "none",
+                WebkitUserSelect: "none",
+                MozUserSelect: "none",
+                msUserSelect: "none",
+              }}
+            >
+              {hoveredComponent.name}
+            </Html>
+          )}
+        </Canvas>
+        <div
+          style={{
+            position: "absolute",
+            right: 24,
+            bottom: 24,
+            fontFamily: "sans-serif",
+            color: "white",
+            WebkitTextStroke: "0.5px rgba(0, 0, 0, 0.5)",
+            fontSize: 11,
+          }}
+        >
+          @{packageJson.version}
+        </div>
       </div>
-    </div>
-  )
-})
+    )
+  },
+)