Adjust FR4 board material properties

src/convert-circuit-json-to-3d-svg.ts

@@ -4,6 +4,7 @@ import Debug from "debug"
 import * as THREE from "three"
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js"
 import { createBoardGeomFromCircuitJson } from "./soup-to-3d"
+import { createBoardMaterial } from "./utils/create-board-material"
 import { createGeometryFromPolygons } from "./utils/create-geometry-from-polygons"
 import { renderComponent } from "./utils/render-component"
 
@@ -91,23 +92,24 @@ export async function convertCircuitJsonTo3dSvg(
     await renderComponent(component, scene)
   }
 
+  const boardData = su(circuitJson).pcb_board.list()[0]
+
   // Add board geometry after components
   const boardGeom = createBoardGeomFromCircuitJson(circuitJson)
   if (boardGeom) {
     for (const geom of boardGeom) {
       const g = geom as any
       if (!g.polygons || g.polygons.length === 0) continue
       const geometry = createGeometryFromPolygons(g.polygons)
-      const material = new THREE.MeshStandardMaterial({
-        color: new THREE.Color(
-          g.color?.[0] ?? 0,
-          g.color?.[1] ?? 0,
-          g.color?.[2] ?? 0,
-        ),
-        metalness: 0.1,
-        roughness: 0.8,
-        opacity: 0.9,
-        transparent: true,
+      const baseColor = new THREE.Color(
+        g.color?.[0] ?? 0,
+        g.color?.[1] ?? 0,
+        g.color?.[2] ?? 0,
+      )
+
+      const material = createBoardMaterial({
+        material: boardData?.material,
+        color: baseColor,
         side: THREE.DoubleSide,
       })
       const mesh = new THREE.Mesh(geometry, material)

src/geoms/constants.ts

@@ -5,7 +5,7 @@ export const M = 0.01
 
 export const colors = {
   copper: [0.9, 0.6, 0.2],
-  fr4Green: [0x05 / 255, 0xa3 / 255, 0x2e / 255],
+  fr4Green: [0.04, 0.16, 0.08],
   fr4GreenSolderWithMask: [0x00 / 255, 0x98 / 255, 0x13 / 255],
   fr1Copper: [0.8, 0.4, 0.2],
   fr1CopperSolderWithMask: [0.9, 0.6, 0.2],

src/hooks/useManifoldBoardBuilder.ts

@@ -35,7 +35,11 @@ import { processCopperPoursForManifold } from "../utils/manifold/process-copper-
 import { processCutoutsForManifold } from "../utils/manifold/process-cutouts"
 
 export interface ManifoldGeoms {
-  board?: { geometry: THREE.BufferGeometry; color: THREE.Color }
+  board?: {
+    geometry: THREE.BufferGeometry
+    color: THREE.Color
+    material: PcbBoard["material"]
+  }
   platedHoles?: Array<{
     key: string
     geometry: THREE.BufferGeometry
@@ -216,6 +220,7 @@ export const useManifoldBoardBuilder = (
             matColorArray[1],
             matColorArray[2],
           ),
+          material: boardData.material,
         }
       }
 

src/utils/create-board-material.ts

@@ -0,0 +1,44 @@
+import * as THREE from "three"
+import type { PcbBoard } from "circuit-json"
+
+type BoardMaterialType = PcbBoard["material"]
+
+interface CreateBoardMaterialOptions {
+  material: BoardMaterialType | undefined
+  color: THREE.ColorRepresentation
+  side?: THREE.Side
+}
+
+const DEFAULT_SIDE = THREE.DoubleSide
+
+export const createBoardMaterial = ({
+  material,
+  color,
+  side = DEFAULT_SIDE,
+}: CreateBoardMaterialOptions): THREE.MeshStandardMaterial => {
+  if (material === "fr4") {
+    return new THREE.MeshPhysicalMaterial({
+      color,
+      side,
+      metalness: 0.0,
+      roughness: 0.8,
+      specularIntensity: 0.2,
+      ior: 1.45,
+      sheen: 0.0,
+      clearcoat: 0.0,
+      transparent: false,
+      opacity: 1.0,
+      flatShading: true,
+    })
+  }
+
+  return new THREE.MeshStandardMaterial({
+    color,
+    side,
+    flatShading: true,
+    metalness: 0.1,
+    roughness: 0.8,
+    transparent: true,
+    opacity: 0.9,
+  })
+}

src/utils/manifold/create-three-geometry-meshes.ts

@@ -1,5 +1,6 @@
 import * as THREE from "three"
 import type { ManifoldGeoms } from "../../hooks/useManifoldBoardBuilder"
+import { createBoardMaterial } from "../create-board-material"
 
 export function createGeometryMeshes(
   geoms: ManifoldGeoms | null,
@@ -10,10 +11,10 @@ export function createGeometryMeshes(
   if (geoms.board && geoms.board.geometry) {
     const mesh = new THREE.Mesh(
       geoms.board.geometry,
-      new THREE.MeshStandardMaterial({
+      createBoardMaterial({
+        material: geoms.board.material,
         color: geoms.board.color,
         side: THREE.DoubleSide,
-        flatShading: true,
       }),
     )
     mesh.name = "board-geom"