@tscircuit/3d-viewer 0.0.406 → 0.0.408

package/dist/index.d.ts

@@ -47,6 +47,7 @@ interface ManifoldGeoms {
     board?: {
         geometry: THREE.BufferGeometry;
         color: THREE.Color;
+        material: PcbBoard["material"];
     };
     platedHoles?: Array<{
         key: string;

package/dist/index.js

@@ -26100,7 +26100,7 @@ import * as THREE13 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.405",
+  version: "0.0.407",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -26879,7 +26879,7 @@ import { su as su2 } from "@tscircuit/circuit-json-util";
 var M = 0.01;
 var colors = {
   copper: [0.9, 0.6, 0.2],
-  fr4Green: [5 / 255, 163 / 255, 46 / 255],
+  fr4Green: [0.04, 0.16, 0.08],
   fr4GreenSolderWithMask: [0 / 255, 152 / 255, 19 / 255],
   fr1Copper: [0.8, 0.4, 0.2],
   fr1CopperSolderWithMask: [0.9, 0.6, 0.2]
@@ -28930,6 +28930,20 @@ function createPadManifoldOp({
       thickness: padBaseThickness,
       borderRadius: rectBorderRadius
     });
+  } else if (pad2.shape === "rotated_rect") {
+    const rectBorderRadius = extractRectBorderRadius(pad2);
+    let padOp = createRoundedRectPrism({
+      Manifold,
+      width: pad2.width,
+      height: pad2.height,
+      thickness: padBaseThickness,
+      borderRadius: rectBorderRadius
+    });
+    const rotation2 = pad2.ccw_rotation ?? 0;
+    if (rotation2) {
+      padOp = padOp.rotate([0, 0, rotation2]);
+    }
+    return padOp;
   } else if (pad2.shape === "circle" && pad2.radius) {
     return Manifold.cylinder(padBaseThickness, pad2.radius, -1, 32, true);
   }
@@ -28938,10 +28952,22 @@ function createPadManifoldOp({
 
 // src/utils/manifold/process-plated-holes.ts
 var COPPER_COLOR = new THREE19.Color(...colors.copper);
+var PLATED_HOLE_LIP_HEIGHT = 0.05;
 function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const platedHoleBoardDrills = [];
   const pcbPlatedHoles = su8(circuitJson).pcb_plated_hole.list();
   const platedHoleCopperGeoms = [];
+  const createPillOp = (width10, height10, depth) => {
+    const pillOp = createRoundedRectPrism({
+      Manifold,
+      width: width10,
+      height: height10,
+      thickness: depth,
+      borderRadius: Math.min(width10, height10) / 2
+    });
+    manifoldInstancesForCleanup.push(pillOp);
+    return pillOp;
+  };
   pcbPlatedHoles.forEach((ph, index) => {
     if (ph.shape === "circle") {
       const translatedDrill = createPlatedHoleDrill({
@@ -28987,60 +29013,15 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
         color: COPPER_COLOR
       });
     } else if (ph.shape === "pill") {
-      const holeWidthRaw = ph.hole_width;
-      const holeHeightRaw = ph.hole_height;
-      const shouldRotate = holeHeightRaw > holeWidthRaw;
-      const holeW = shouldRotate ? holeHeightRaw : holeWidthRaw;
-      const holeH = shouldRotate ? holeWidthRaw : holeHeightRaw;
+      const holeW = ph.hole_width;
+      const holeH = ph.hole_height;
       const defaultPadExtension = 0.4;
-      const outerW = shouldRotate ? ph.outer_height ?? holeH + defaultPadExtension / 2 : ph.outer_width ?? holeW + defaultPadExtension / 2;
-      const outerH = shouldRotate ? ph.outer_width ?? holeW + defaultPadExtension / 2 : ph.outer_height ?? holeH + defaultPadExtension / 2;
-      const createPill = (width10, height10, depth) => {
-        const radius = height10 / 2;
-        const rectLength = width10 - height10;
-        let pillOp;
-        if (rectLength < 1e-9) {
-          pillOp = Manifold.cylinder(
-            depth,
-            radius,
-            radius,
-            SMOOTH_CIRCLE_SEGMENTS,
-            true
-          );
-        } else {
-          const rect = Manifold.cube(
-            [Math.max(0, rectLength), height10, depth],
-            true
-          );
-          const cap1 = Manifold.cylinder(
-            depth,
-            radius,
-            radius,
-            SMOOTH_CIRCLE_SEGMENTS,
-            true
-          ).translate([-rectLength / 2, 0, 0]);
-          const cap2 = Manifold.cylinder(
-            depth,
-            radius,
-            radius,
-            SMOOTH_CIRCLE_SEGMENTS,
-            true
-          ).translate([rectLength / 2, 0, 0]);
-          pillOp = Manifold.union([rect, cap1, cap2]);
-          manifoldInstancesForCleanup.push(rect, cap1, cap2);
-        }
-        manifoldInstancesForCleanup.push(pillOp);
-        return pillOp;
-      };
+      const outerW = ph.outer_width ?? holeW + defaultPadExtension;
+      const outerH = ph.outer_height ?? holeH + defaultPadExtension;
       const drillW = holeW + 2 * MANIFOLD_Z_OFFSET;
       const drillH = holeH + 2 * MANIFOLD_Z_OFFSET;
       const drillDepth = pcbThickness * 1.2;
-      let boardPillDrillOp = createPill(drillW, drillH, drillDepth);
-      if (shouldRotate) {
-        const rotatedOp = boardPillDrillOp.rotate([0, 0, 90]);
-        manifoldInstancesForCleanup.push(rotatedOp);
-        boardPillDrillOp = rotatedOp;
-      }
+      let boardPillDrillOp = createPillOp(drillW, drillH, drillDepth);
       if (ph.ccw_rotation) {
         const rotatedOp = boardPillDrillOp.rotate([0, 0, ph.ccw_rotation]);
         manifoldInstancesForCleanup.push(rotatedOp);
@@ -29054,12 +29035,12 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
       manifoldInstancesForCleanup.push(translatedBoardPillDrill);
       platedHoleBoardDrills.push(translatedBoardPillDrill);
       const copperPartThickness = pcbThickness + 2 * MANIFOLD_Z_OFFSET;
-      const outerCopperOpUnrotated = createPill(
+      const outerCopperOpUnrotated = createPillOp(
         outerW,
         outerH,
         copperPartThickness
       );
-      const innerDrillOpUnrotated = createPill(
+      const innerDrillOpUnrotated = createPillOp(
         holeW,
         holeH,
         copperPartThickness * 1.05
@@ -29069,11 +29050,6 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
         innerDrillOpUnrotated
       );
       manifoldInstancesForCleanup.push(finalPlatedPartOp);
-      if (shouldRotate) {
-        const rotatedOp = finalPlatedPartOp.rotate([0, 0, 90]);
-        manifoldInstancesForCleanup.push(rotatedOp);
-        finalPlatedPartOp = rotatedOp;
-      }
       if (ph.ccw_rotation) {
         const rotatedOp = finalPlatedPartOp.rotate([0, 0, ph.ccw_rotation]);
         manifoldInstancesForCleanup.push(rotatedOp);
@@ -29089,6 +29065,73 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
         geometry: threeGeom,
         color: COPPER_COLOR
       });
+    } else if (ph.shape === "pill_hole_with_rect_pad") {
+      const holeW = ph.hole_width;
+      const holeH = ph.hole_height;
+      const padWidth = ph.rect_pad_width;
+      const padHeight = ph.rect_pad_height;
+      const rectBorderRadius = extractRectBorderRadius(ph);
+      const padThickness = DEFAULT_SMT_PAD_THICKNESS;
+      const drillW = holeW + 2 * MANIFOLD_Z_OFFSET;
+      const drillH = holeH + 2 * MANIFOLD_Z_OFFSET;
+      const drillDepth = pcbThickness * 1.2;
+      let boardPillDrillOp = createPillOp(drillW, drillH, drillDepth);
+      const translatedBoardPillDrill = boardPillDrillOp.translate([
+        ph.x,
+        ph.y,
+        0
+      ]);
+      manifoldInstancesForCleanup.push(translatedBoardPillDrill);
+      platedHoleBoardDrills.push(translatedBoardPillDrill);
+      let copperBarrelOp = createPillOp(
+        holeW,
+        holeH,
+        pcbThickness + 2 * MANIFOLD_Z_OFFSET
+      );
+      let topPadOp = createRoundedRectPrism({
+        Manifold,
+        width: padWidth,
+        height: padHeight,
+        thickness: padThickness,
+        borderRadius: rectBorderRadius
+      });
+      manifoldInstancesForCleanup.push(topPadOp);
+      let bottomPadOp = createRoundedRectPrism({
+        Manifold,
+        width: padWidth,
+        height: padHeight,
+        thickness: padThickness,
+        borderRadius: rectBorderRadius
+      });
+      manifoldInstancesForCleanup.push(bottomPadOp);
+      const topPadZ = pcbThickness / 2 + padThickness / 2 + MANIFOLD_Z_OFFSET;
+      const bottomPadZ = -pcbThickness / 2 - padThickness / 2 - MANIFOLD_Z_OFFSET;
+      topPadOp = topPadOp.translate([0, 0, topPadZ]);
+      manifoldInstancesForCleanup.push(topPadOp);
+      bottomPadOp = bottomPadOp.translate([0, 0, bottomPadZ]);
+      manifoldInstancesForCleanup.push(bottomPadOp);
+      const copperUnionBeforeCut = Manifold.union([
+        copperBarrelOp,
+        topPadOp,
+        bottomPadOp
+      ]);
+      manifoldInstancesForCleanup.push(copperUnionBeforeCut);
+      const holeCutWidth = Math.max(holeW - 2 * PLATED_HOLE_LIP_HEIGHT, 0.01);
+      const holeCutHeight = Math.max(holeH - 2 * PLATED_HOLE_LIP_HEIGHT, 0.01);
+      const holeCutDepth = pcbThickness + 2 * padThickness + 4 * MANIFOLD_Z_OFFSET;
+      let holeCutOp = createPillOp(holeCutWidth, holeCutHeight, holeCutDepth);
+      const finalPlatedPartOp = copperUnionBeforeCut.subtract(holeCutOp);
+      manifoldInstancesForCleanup.push(finalPlatedPartOp);
+      const translatedPlatedPart = finalPlatedPartOp.translate([ph.x, ph.y, 0]);
+      manifoldInstancesForCleanup.push(translatedPlatedPart);
+      const threeGeom = manifoldMeshToThreeGeometry(
+        translatedPlatedPart.getMesh()
+      );
+      platedHoleCopperGeoms.push({
+        key: `ph-${ph.pcb_plated_hole_id || index}`,
+        geometry: threeGeom,
+        color: COPPER_COLOR
+      });
     } else if (ph.shape === "circular_hole_with_rect_pad") {
       const translatedDrill = createCircleHoleDrill({
         Manifold,
@@ -29708,7 +29751,8 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
-          )
+          ),
+          material: boardData.material
         };
       }
       const { smtPadGeoms } = processSmtPadsForManifold(
@@ -29787,17 +29831,53 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
+import * as THREE25 from "three";
+
+// src/utils/create-board-material.ts
 import * as THREE24 from "three";
+var DEFAULT_SIDE = THREE24.DoubleSide;
+var createBoardMaterial = ({
+  material,
+  color,
+  side = DEFAULT_SIDE
+}) => {
+  if (material === "fr4") {
+    return new THREE24.MeshPhysicalMaterial({
+      color,
+      side,
+      metalness: 0,
+      roughness: 0.8,
+      specularIntensity: 0.2,
+      ior: 1.45,
+      sheen: 0,
+      clearcoat: 0,
+      transparent: false,
+      opacity: 1,
+      flatShading: true
+    });
+  }
+  return new THREE24.MeshStandardMaterial({
+    color,
+    side,
+    flatShading: true,
+    metalness: 0.1,
+    roughness: 0.8,
+    transparent: true,
+    opacity: 0.9
+  });
+};
+
+// src/utils/manifold/create-three-geometry-meshes.ts
 function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE24.Mesh(
+    const mesh = new THREE25.Mesh(
       geoms.board.geometry,
-      new THREE24.MeshStandardMaterial({
+      createBoardMaterial({
+        material: geoms.board.material,
         color: geoms.board.color,
-        side: THREE24.DoubleSide,
-        flatShading: true
+        side: THREE25.DoubleSide
       })
     );
     mesh.name = "board-geom";
@@ -29806,11 +29886,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE24.Mesh(
+        const mesh = new THREE25.Mesh(
           comp.geometry,
-          new THREE24.MeshStandardMaterial({
+          new THREE25.MeshStandardMaterial({
             color: comp.color,
-            side: THREE24.DoubleSide,
+            side: THREE25.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -29828,21 +29908,21 @@ function createGeometryMeshes(geoms) {
 }
 
 // src/utils/manifold/create-three-texture-meshes.ts
-import * as THREE25 from "three";
+import * as THREE26 from "three";
 function createTextureMeshes(textures, boardData, pcbThickness) {
   const meshes = [];
   if (!textures || !boardData || pcbThickness === null) return meshes;
   const createTexturePlane = (texture, yOffset, isBottomLayer, keySuffix) => {
     if (!texture) return null;
-    const planeGeom = new THREE25.PlaneGeometry(boardData.width, boardData.height);
-    const material = new THREE25.MeshBasicMaterial({
+    const planeGeom = new THREE26.PlaneGeometry(boardData.width, boardData.height);
+    const material = new THREE26.MeshBasicMaterial({
       map: texture,
       transparent: true,
-      side: THREE25.DoubleSide,
+      side: THREE26.DoubleSide,
       depthWrite: false
       // Important for layers to avoid z-fighting issues with board itself
     });
-    const mesh = new THREE25.Mesh(planeGeom, material);
+    const mesh = new THREE26.Mesh(planeGeom, material);
     mesh.position.set(boardData.center.x, boardData.center.y, yOffset);
     if (isBottomLayer) {
       mesh.rotation.set(Math.PI, 0, 0);
@@ -30498,11 +30578,11 @@ var CadViewer = (props) => {
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
 import { su as su14 } from "@tscircuit/circuit-json-util";
-import * as THREE29 from "three";
+import * as THREE30 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE26 from "three";
+import * as THREE27 from "three";
 import { BufferGeometry as BufferGeometry3, Float32BufferAttribute as Float32BufferAttribute2 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry3();
@@ -30516,12 +30596,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon3.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE26.Vector3(...polygon3.vertices[0]);
-      const v2 = new THREE26.Vector3(...polygon3.vertices[i]);
-      const v3 = new THREE26.Vector3(...polygon3.vertices[i + 1]);
-      const normal = new THREE26.Vector3().crossVectors(
-        new THREE26.Vector3().subVectors(v2, v1),
-        new THREE26.Vector3().subVectors(v3, v1)
+      const v1 = new THREE27.Vector3(...polygon3.vertices[0]);
+      const v2 = new THREE27.Vector3(...polygon3.vertices[i]);
+      const v3 = new THREE27.Vector3(...polygon3.vertices[i + 1]);
+      const normal = new THREE27.Vector3().crossVectors(
+        new THREE27.Vector3().subVectors(v2, v1),
+        new THREE27.Vector3().subVectors(v3, v1)
       ).normalize();
       normals.push(
         normal.x,
@@ -30544,10 +30624,10 @@ function createGeometryFromPolygons(polygons) {
 // src/utils/render-component.tsx
 var import_modeling3 = __toESM(require_src(), 1);
 var import_jscad_planner2 = __toESM(require_dist(), 1);
-import * as THREE28 from "three";
+import * as THREE29 from "three";
 
 // src/utils/load-model.ts
-import * as THREE27 from "three";
+import * as THREE28 from "three";
 import { GLTFLoader as GLTFLoader2 } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { OBJLoader as OBJLoader2 } from "three/examples/jsm/loaders/OBJLoader.js";
 import { STLLoader as STLLoader2 } from "three/examples/jsm/loaders/STLLoader.js";
@@ -30555,12 +30635,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE27.MeshStandardMaterial({
+    const material = new THREE28.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE27.Mesh(geometry, material);
+    return new THREE28.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -30593,9 +30673,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE28.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE28.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE28.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE29.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE29.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE29.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -30609,13 +30689,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE28.MeshStandardMaterial({
+      const material2 = new THREE29.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE28.DoubleSide
+        side: THREE29.DoubleSide
       });
-      const mesh2 = new THREE28.Mesh(threeGeom, material2);
+      const mesh2 = new THREE29.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -30625,9 +30705,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE28.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE28.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE28.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE29.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE29.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE29.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -30643,17 +30723,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE28.Color(geomInfo.color);
+      const color = new THREE29.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE28.MeshStandardMaterial({
+      const material2 = new THREE29.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE28.DoubleSide
+        side: THREE29.DoubleSide
       });
-      const mesh2 = new THREE28.Mesh(threeGeom, material2);
+      const mesh2 = new THREE29.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -30663,22 +30743,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE28.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE28.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE28.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE29.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE29.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE29.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE28.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE28.MeshStandardMaterial({
+  const geometry = new THREE29.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE29.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE28.Mesh(geometry, material);
+  const mesh = new THREE29.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -30699,11 +30779,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE29.Scene();
+  const scene = new THREE30.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE29.Color(backgroundColor), 1);
-  const camera = new THREE29.OrthographicCamera();
+  renderer.setClearColor(new THREE30.Color(backgroundColor), 1);
+  const camera = new THREE30.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -30717,45 +30797,44 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   camera.position.set(position.x, position.y, position.z);
   camera.up.set(0, 1, 0);
   const lookAt = options.camera?.lookAt ?? { x: 0, y: 0, z: 0 };
-  camera.lookAt(new THREE29.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE30.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE29.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE30.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE29.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE30.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su14(circuitJson).cad_component.list();
   for (const component of components) {
     await renderComponent(component, scene);
   }
+  const boardData = su14(circuitJson).pcb_board.list()[0];
   const boardGeom = createBoardGeomFromCircuitJson(circuitJson);
   if (boardGeom) {
     for (const geom of boardGeom) {
       const g = geom;
       if (!g.polygons || g.polygons.length === 0) continue;
       const geometry = createGeometryFromPolygons(g.polygons);
-      const material = new THREE29.MeshStandardMaterial({
-        color: new THREE29.Color(
-          g.color?.[0] ?? 0,
-          g.color?.[1] ?? 0,
-          g.color?.[2] ?? 0
-        ),
-        metalness: 0.1,
-        roughness: 0.8,
-        opacity: 0.9,
-        transparent: true,
-        side: THREE29.DoubleSide
+      const baseColor = new THREE30.Color(
+        g.color?.[0] ?? 0,
+        g.color?.[1] ?? 0,
+        g.color?.[2] ?? 0
+      );
+      const material = createBoardMaterial({
+        material: boardData?.material,
+        color: baseColor,
+        side: THREE30.DoubleSide
       });
-      const mesh = new THREE29.Mesh(geometry, material);
+      const mesh = new THREE30.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridHelper = new THREE29.GridHelper(100, 100);
+  const gridHelper = new THREE30.GridHelper(100, 100);
   gridHelper.rotation.x = Math.PI / 2;
   scene.add(gridHelper);
-  const box = new THREE29.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE29.Vector3());
-  const size2 = box.getSize(new THREE29.Vector3());
+  const box = new THREE30.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE30.Vector3());
+  const size2 = box.getSize(new THREE30.Vector3());
   scene.position.sub(center);
   const maxDim = Math.max(size2.x, size2.y, size2.z);
   if (maxDim > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.406",
+  "version": "0.0.408",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",