feat: experimental 3D view

package.json

@@ -42,6 +42,7 @@
     "plotly.js-basic-dist": "^2.15.1",
     "solid-js": "^1.9.9",
     "solid-record": "^0.2.1",
+    "solid-three": "^0.3.0-next.11",
     "three": "^0.149.0",
     "vinxi": "^0.5.8",
     "vite": "^6.1.1"

src/components/Isometric.tsx

@@ -0,0 +1,53 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import { For } from 'solid-js';
+import { Canvas, Entity } from 'solid-three';
+import * as THREE from 'three';
+import { layout, rectLayer, rectViaLayer } from '../model/layout';
+
+export default function Isometric() {
+  const rects = () => layout.rects;
+
+  return (
+    <Canvas
+      defaultCamera={{ position: [0, 0, 900] }}
+      shadows
+      style={{ width: '400px', height: '600px' }}
+    >
+      <Entity
+        from={THREE.Group}
+        position={[-275, 100, 0]}
+        rotation={[(7 * Math.PI) / 4, 0, Math.PI / 4]}
+      >
+        <For each={rects()}>
+          {(rect) => {
+            const layer = rectLayer(rect);
+            const viaLayer = rectViaLayer(layout, rect);
+            if (!viaLayer || !layer) {
+              return <Entity from={THREE.Mesh} />;
+            }
+
+            return (
+              <Entity
+                from={THREE.Mesh}
+                position={[
+                  rect.x + rect.width / 2,
+                  -(rect.y + rect.height / 2),
+                  -viaLayer.crossY - viaLayer.crossHeight / 2,
+                ]}
+              >
+                <Entity
+                  from={THREE.BoxGeometry}
+                  args={[rect.width, rect.height, viaLayer.crossHeight]}
+                />
+                <Entity from={THREE.MeshStandardMaterial} color={layer.color} />
+              </Entity>
+            );
+          }}
+        </For>
+      </Entity>
+      <Entity from={THREE.AmbientLight} intensity={0.1} />
+      <Entity from={THREE.PointLight} position={[0, 600, -250]} />
+    </Canvas>
+  );
+}

src/components/MainView.tsx

@@ -10,9 +10,10 @@ import CrossSection from './CrossSection';
 import DRCList from './DRCList';
 import Editor from './Editor';
 import Layers from './Layers';
+import Isometric from './Isometric';
 import SimulationParams from './SimulationParams';
 
-type ITabName = 'xsection' | 'simulation';
+type ITabName = 'xsection' | 'simulation' | '3d';
 
 export default function MainView() {
   const [drc, setDRC] = createSignal<IDRCItem[] | undefined>();
@@ -43,6 +44,12 @@ export default function MainView() {
       </Paper>
       <Paper sx={{ padding: 1 }}>
         <ButtonGroup>
+          <Button
+            onClick={() => setActiveTab('3d')}
+            variant={activeTab() === '3d' ? 'contained' : 'outlined'}
+          >
+            3D
+          </Button>
           <Button
             onClick={() => setActiveTab('xsection')}
             endIcon={hasDRCErrors() ? <Error /> : <Check />}
@@ -74,6 +81,9 @@ export default function MainView() {
           </Show>
           <DRCList drc={drc()} />
         </Show>
+        <Show when={activeTab() === '3d'}>
+          <Isometric />
+        </Show>
       </Paper>
     </Box>
   );