@tscircuit/3d-viewer 0.0.406 → 0.0.407

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.406",
   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]
@@ -29708,7 +29708,8 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
-          )
+          ),
+          material: boardData.material
         };
       }
       const { smtPadGeoms } = processSmtPadsForManifold(
@@ -29787,17 +29788,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 +29843,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 +29865,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 +30535,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 +30553,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 +30581,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 +30592,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 +30630,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 +30646,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 +30662,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 +30680,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 +30700,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 +30736,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 +30754,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.407",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",