@tscircuit/3d-viewer 0.0.405 → 0.0.406

package/dist/index.js

@@ -14598,9 +14598,39 @@ function MixedStlModel({
 
 // src/three-components/GltfModel.tsx
 import { useState as useState3, useEffect as useEffect5 } from "react";
-import * as THREE3 from "three";
+import * as THREE4 from "three";
 import { GLTFLoader } from "three-stdlib";
+
+// src/react-three/getDefaultEnvironmentMap.ts
+import * as THREE3 from "three";
+import { RoomEnvironment } from "three-stdlib";
+var environmentCache = /* @__PURE__ */ new WeakMap();
+var createFallbackEnvironmentMap = () => {
+  const texture = new THREE3.Texture();
+  texture.name = "fallback-environment-map";
+  texture.mapping = THREE3.EquirectangularReflectionMapping;
+  return texture;
+};
+var getDefaultEnvironmentMap = (renderer) => {
+  if (!renderer) return null;
+  const cacheKey = renderer;
+  const cached = environmentCache.get(cacheKey);
+  if (cached) return cached;
+  let texture;
+  if (renderer instanceof THREE3.WebGLRenderer) {
+    const pmremGenerator = new THREE3.PMREMGenerator(renderer);
+    texture = pmremGenerator.fromScene(RoomEnvironment(), 0.04).texture;
+    pmremGenerator.dispose();
+  } else {
+    texture = createFallbackEnvironmentMap();
+  }
+  environmentCache.set(cacheKey, texture);
+  return texture;
+};
+
+// src/three-components/GltfModel.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
+var DEFAULT_ENV_MAP_INTENSITY = 1.25;
 function GltfModel({
   gltfUrl,
   position,
@@ -14610,7 +14640,7 @@ function GltfModel({
   isHovered,
   scale: scale2
 }) {
-  const { rootObject } = useThree();
+  const { renderer, rootObject } = useThree();
   const [model, setModel] = useState3(null);
   useEffect5(() => {
     if (!gltfUrl) return;
@@ -14653,10 +14683,47 @@ function GltfModel({
       rootObject.remove(model);
     };
   }, [rootObject, model]);
+  useEffect5(() => {
+    if (!model || !renderer) return;
+    const environmentMap = getDefaultEnvironmentMap(renderer);
+    if (!environmentMap) return;
+    const previousMaterialState = [];
+    const applyEnvironmentToMaterial = (material) => {
+      if (!(material instanceof THREE4.MeshStandardMaterial)) return;
+      previousMaterialState.push({
+        material,
+        envMap: material.envMap ?? null,
+        envMapIntensity: material.envMapIntensity ?? 1
+      });
+      if (!material.envMap) {
+        material.envMap = environmentMap;
+      }
+      if (typeof material.envMapIntensity !== "number" || material.envMapIntensity < DEFAULT_ENV_MAP_INTENSITY) {
+        material.envMapIntensity = DEFAULT_ENV_MAP_INTENSITY;
+      }
+      material.needsUpdate = true;
+    };
+    model.traverse((child) => {
+      if (!(child instanceof THREE4.Mesh)) return;
+      const material = child.material;
+      if (Array.isArray(material)) {
+        material.forEach(applyEnvironmentToMaterial);
+      } else if (material) {
+        applyEnvironmentToMaterial(material);
+      }
+    });
+    return () => {
+      previousMaterialState.forEach(({ material, envMap, envMapIntensity }) => {
+        material.envMap = envMap;
+        material.envMapIntensity = envMapIntensity;
+        material.needsUpdate = true;
+      });
+    };
+  }, [model, renderer]);
   useEffect5(() => {
     if (!model) return;
     model.traverse((child) => {
-      if (child instanceof THREE3.Mesh && child.material instanceof THREE3.MeshStandardMaterial) {
+      if (child instanceof THREE4.Mesh && child.material instanceof THREE4.MeshStandardMaterial) {
         if (isHovered) {
           child.material.emissive.setHex(255);
           child.material.emissiveIntensity = 0.2;
@@ -25695,7 +25762,7 @@ function getJscadModelForFootprint(footprint) {
 }
 
 // src/three-components/JscadModel.tsx
-import * as THREE4 from "three";
+import * as THREE5 from "three";
 import { useMemo as useMemo4, useEffect as useEffect6 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var JscadModel = ({
@@ -25714,16 +25781,16 @@ var JscadModel = ({
       return { threeGeom: null, material: null };
     }
     const threeGeom2 = convertCSGToThreeGeom(jscadObject);
-    const material2 = new THREE4.MeshStandardMaterial({
+    const material2 = new THREE5.MeshStandardMaterial({
       vertexColors: true,
-      side: THREE4.DoubleSide
+      side: THREE5.DoubleSide
       // Ensure both sides are visible
     });
     return { threeGeom: threeGeom2, material: material2 };
   }, [jscadPlan]);
   const mesh = useMemo4(() => {
     if (!threeGeom) return null;
-    return new THREE4.Mesh(threeGeom, material);
+    return new THREE5.Mesh(threeGeom, material);
   }, [threeGeom, material]);
   useEffect6(() => {
     if (!mesh || !rootObject) return;
@@ -25750,7 +25817,7 @@ var JscadModel = ({
   useMemo4(() => {
     if (!material) return;
     if (isHovered) {
-      const color = new THREE4.Color(material.color.getHex());
+      const color = new THREE5.Color(material.color.getHex());
       material.emissive.copy(color);
       material.emissive.setRGB(0, 0, 1);
       material.emissiveIntensity = 0.2;
@@ -25772,7 +25839,7 @@ var JscadModel = ({
 
 // src/three-components/FootprinterModel.tsx
 import { useMemo as useMemo5, useEffect as useEffect7 } from "react";
-import * as THREE5 from "three";
+import * as THREE6 from "three";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var FootprinterModel = ({
   positionOffset,
@@ -25787,21 +25854,21 @@ var FootprinterModel = ({
   const group = useMemo5(() => {
     if (!footprint) return null;
     const { geometries: geometries2 } = getJscadModelForFootprint(footprint);
-    const group2 = new THREE5.Group();
+    const group2 = new THREE6.Group();
     for (const geomInfo of geometries2.flat(Infinity)) {
       const geom = geomInfo.geom;
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE5.Color(geomInfo.color);
+      const color = new THREE6.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material = new THREE5.MeshStandardMaterial({
+      const material = new THREE6.MeshStandardMaterial({
         vertexColors: true,
-        side: THREE5.DoubleSide
+        side: THREE6.DoubleSide
       });
-      const mesh = new THREE5.Mesh(threeGeom, material);
+      const mesh = new THREE6.Mesh(threeGeom, material);
       group2.add(mesh);
     }
     return group2;
@@ -25831,7 +25898,7 @@ var FootprinterModel = ({
   useEffect7(() => {
     if (!group) return;
     group.traverse((child) => {
-      if (child instanceof THREE5.Mesh && child.material instanceof THREE5.MeshStandardMaterial) {
+      if (child instanceof THREE6.Mesh && child.material instanceof THREE6.MeshStandardMaterial) {
         if (isHovered) {
           child.material.emissive.setHex(255);
           child.material.emissiveIntensity = 0.2;
@@ -25859,7 +25926,7 @@ var tuple = (...args) => args;
 // src/react-three/Html.tsx
 import { useRef as useRef2, useEffect as useEffect8, useState as useState4 } from "react";
 import ReactDOM from "react-dom";
-import * as THREE6 from "three";
+import * as THREE7 from "three";
 var Html = ({ children, position, style }) => {
   const { camera, renderer } = useThree();
   const el = useRef2(document.createElement("div"));
@@ -25880,7 +25947,7 @@ var Html = ({ children, position, style }) => {
   }, [renderer, children]);
   useFrame(() => {
     if (!camera || !el.current || !renderer) return;
-    const vector = new THREE6.Vector3(...position);
+    const vector = new THREE7.Vector3(...position);
     vector.project(camera);
     const rect = renderer.domElement.getBoundingClientRect();
     const x = Math.round((vector.x + 1) / 2 * rect.width);
@@ -26028,12 +26095,12 @@ import {
   useMemo as useMemo13,
   useState as useState7
 } from "react";
-import * as THREE11 from "three";
+import * as THREE13 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.404",
+  version: "0.0.405",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -26109,7 +26176,7 @@ var package_default = {
 
 // src/three-components/cube-with-labeled-sides.tsx
 import { useEffect as useEffect10, useMemo as useMemo8 } from "react";
-import * as THREE7 from "three";
+import * as THREE8 from "three";
 
 // src/react-three/Text.tsx
 import { useEffect as useEffect9, useMemo as useMemo7 } from "react";
@@ -26167,13 +26234,13 @@ var Text = ({
 // src/three-components/cube-with-labeled-sides.tsx
 import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 if (typeof window !== "undefined") {
-  window.TSCI_MAIN_CAMERA_ROTATION = new THREE7.Euler(0, 0, 0);
+  window.TSCI_MAIN_CAMERA_ROTATION = new THREE8.Euler(0, 0, 0);
 }
 function computePointInFront(rotationVector, distance2) {
-  const quaternion = new THREE7.Quaternion().setFromEuler(
-    new THREE7.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
+  const quaternion = new THREE8.Quaternion().setFromEuler(
+    new THREE8.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
   );
-  const forwardVector = new THREE7.Vector3(0, 0, 1);
+  const forwardVector = new THREE8.Vector3(0, 0, 1);
   forwardVector.applyQuaternion(quaternion);
   const result = forwardVector.multiplyScalar(distance2);
   return result;
@@ -26182,7 +26249,7 @@ var CubeWithLabeledSides = ({}) => {
   const { camera, scene } = useThree();
   useEffect10(() => {
     if (!scene) return;
-    const ambientLight = new THREE7.AmbientLight(16777215, Math.PI / 2);
+    const ambientLight = new THREE8.AmbientLight(16777215, Math.PI / 2);
     scene.add(ambientLight);
     return () => {
       scene.remove(ambientLight);
@@ -26196,16 +26263,16 @@ var CubeWithLabeledSides = ({}) => {
     camera.lookAt(0, 0, 0);
   });
   const group = useMemo8(() => {
-    const g = new THREE7.Group();
+    const g = new THREE8.Group();
     g.rotation.fromArray([Math.PI / 2, 0, 0]);
-    const box = new THREE7.Mesh(
-      new THREE7.BoxGeometry(1, 1, 1),
-      new THREE7.MeshStandardMaterial({ color: "white" })
+    const box = new THREE8.Mesh(
+      new THREE8.BoxGeometry(1, 1, 1),
+      new THREE8.MeshStandardMaterial({ color: "white" })
     );
     g.add(box);
-    const edges = new THREE7.LineSegments(
-      new THREE7.EdgesGeometry(new THREE7.BoxGeometry(1, 1, 1)),
-      new THREE7.LineBasicMaterial({ color: 0, linewidth: 2 })
+    const edges = new THREE8.LineSegments(
+      new THREE8.EdgesGeometry(new THREE8.BoxGeometry(1, 1, 1)),
+      new THREE8.LineBasicMaterial({ color: 0, linewidth: 2 })
     );
     g.add(edges);
     return g;
@@ -26296,13 +26363,21 @@ import {
   useImperativeHandle,
   useMemo as useMemo9
 } from "react";
-import * as THREE8 from "three";
+import * as THREE10 from "three";
 
 // src/react-three/remove-existing-canvases.ts
 function removeExistingCanvases(container) {
   container.querySelectorAll("canvas").forEach((existingCanvas) => existingCanvas.remove());
 }
 
+// src/react-three/configure-renderer.ts
+import * as THREE9 from "three";
+var configureRenderer = (renderer) => {
+  renderer.outputColorSpace = THREE9.SRGBColorSpace;
+  renderer.toneMapping = THREE9.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1;
+};
+
 // src/react-three/Canvas.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var Canvas = forwardRef(
@@ -26328,23 +26403,24 @@ var Canvas = forwardRef(
       },
       []
     );
-    const scene = useMemo9(() => new THREE8.Scene(), []);
+    const scene = useMemo9(() => new THREE10.Scene(), []);
     if (sceneProps?.up) {
       scene.up.set(sceneProps.up.x, sceneProps.up.y, sceneProps.up.z);
     }
-    const rootObject = useRef4(new THREE8.Object3D());
+    const rootObject = useRef4(new THREE10.Object3D());
     useImperativeHandle(ref, () => rootObject.current);
     useEffect11(() => {
       if (!mountRef.current) return;
       removeExistingCanvases(mountRef.current);
-      const renderer = new THREE8.WebGLRenderer({ antialias: true, alpha: true });
+      const renderer = new THREE10.WebGLRenderer({ antialias: true, alpha: true });
+      configureRenderer(renderer);
       renderer.setSize(
         mountRef.current.clientWidth,
         mountRef.current.clientHeight
       );
       renderer.setPixelRatio(window.devicePixelRatio);
       mountRef.current.appendChild(renderer.domElement);
-      const camera = new THREE8.PerspectiveCamera(
+      const camera = new THREE10.PerspectiveCamera(
         75,
         mountRef.current.clientWidth / mountRef.current.clientHeight,
         0.1,
@@ -26372,7 +26448,7 @@ var Canvas = forwardRef(
         removeFrameListener
       });
       let animationFrameId;
-      const clock = new THREE8.Clock();
+      const clock = new THREE10.Clock();
       const animate = () => {
         const time2 = clock.getElapsedTime();
         const delta = clock.getDelta();
@@ -26474,7 +26550,7 @@ var OrbitControls = ({
 
 // src/react-three/Grid.tsx
 import { useEffect as useEffect13, useMemo as useMemo11 } from "react";
-import * as THREE9 from "three";
+import * as THREE11 from "three";
 var vertexShader = `
   varying vec3 worldPosition;
   void main() {
@@ -26520,24 +26596,24 @@ var Grid = ({
   const { scene, camera } = useThree();
   const size2 = 1e3;
   const gridMesh = useMemo11(() => {
-    const geometry = new THREE9.PlaneGeometry(size2, size2);
+    const geometry = new THREE11.PlaneGeometry(size2, size2);
     geometry.rotateX(-Math.PI / 2);
-    const material = new THREE9.ShaderMaterial({
+    const material = new THREE11.ShaderMaterial({
       vertexShader,
       fragmentShader,
       uniforms: {
         cellSize: { value: cellSize },
         sectionSize: { value: sectionSize },
-        gridColor: { value: new THREE9.Color(15658734) },
-        sectionColor: { value: new THREE9.Color(13421823) },
+        gridColor: { value: new THREE11.Color(15658734) },
+        sectionColor: { value: new THREE11.Color(13421823) },
         fadeDistance: { value: 100 },
         // Fade out based on sectionSize
         fadeStrength: { value: 1.5 }
       },
       transparent: true,
-      side: THREE9.DoubleSide
+      side: THREE11.DoubleSide
     });
-    const mesh = new THREE9.Mesh(geometry, material);
+    const mesh = new THREE11.Mesh(geometry, material);
     if (rotation2) {
       mesh.rotation.fromArray(rotation2);
     }
@@ -26566,15 +26642,15 @@ var Grid = ({
 
 // src/react-three/Lights.tsx
 import { useEffect as useEffect14, useMemo as useMemo12 } from "react";
-import * as THREE10 from "three";
+import * as THREE12 from "three";
 var Lights = () => {
   const { scene } = useThree();
   const ambientLight = useMemo12(
-    () => new THREE10.AmbientLight(16777215, Math.PI / 2),
+    () => new THREE12.AmbientLight(16777215, Math.PI / 2),
     []
   );
   const pointLight = useMemo12(() => {
-    const light = new THREE10.PointLight(16777215, Math.PI / 4);
+    const light = new THREE12.PointLight(16777215, Math.PI / 4);
     light.position.set(-10, -10, 10);
     light.decay = 0;
     return light;
@@ -26655,7 +26731,7 @@ var CadViewerContainer = forwardRef2(
         Canvas,
         {
           ref,
-          scene: { up: new THREE11.Vector3(0, 0, 1) },
+          scene: { up: new THREE13.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           children: [
             /* @__PURE__ */ jsx11(RotationTracker, {}),
@@ -28176,7 +28252,7 @@ var useBoardGeomBuilder = (circuitJson) => {
 
 // src/three-components/Error3d.tsx
 import { useState as useState10, useCallback as useCallback4, useEffect as useEffect18, useMemo as useMemo15 } from "react";
-import * as THREE12 from "three";
+import * as THREE14 from "three";
 import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var Error3d = ({
   error,
@@ -28210,7 +28286,7 @@ var Error3d = ({
     return [0, 0, 0];
   }, [cad_component2]);
   const group = useMemo15(() => {
-    const g = new THREE12.Group();
+    const g = new THREE14.Group();
     g.position.fromArray(position);
     return g;
   }, [position]);
@@ -28270,9 +28346,9 @@ var Error3d = ({
 };
 var ErrorBox = ({ parent }) => {
   const mesh = useMemo15(() => {
-    const m = new THREE12.Mesh(
-      new THREE12.BoxGeometry(0.5, 0.5, 0.5),
-      new THREE12.MeshStandardMaterial({
+    const m = new THREE14.Mesh(
+      new THREE14.BoxGeometry(0.5, 0.5, 0.5),
+      new THREE14.MeshStandardMaterial({
         depthTest: false,
         transparent: true,
         color: "red",
@@ -28294,7 +28370,7 @@ var ErrorBox = ({ parent }) => {
 
 // src/three-components/STLModel.tsx
 import { useState as useState11, useEffect as useEffect19, useMemo as useMemo16 } from "react";
-import * as THREE13 from "three";
+import * as THREE15 from "three";
 import { STLLoader } from "three-stdlib";
 function STLModel({
   stlUrl,
@@ -28325,12 +28401,12 @@ function STLModel({
   }, [stlUrl, stlData]);
   const mesh = useMemo16(() => {
     if (!geom) return null;
-    const material = new THREE13.MeshStandardMaterial({
-      color: Array.isArray(color) ? new THREE13.Color(color[0], color[1], color[2]) : color,
+    const material = new THREE15.MeshStandardMaterial({
+      color: Array.isArray(color) ? new THREE15.Color(color[0], color[1], color[2]) : color,
       transparent: opacity !== 1,
       opacity
     });
-    return new THREE13.Mesh(geom, material);
+    return new THREE15.Mesh(geom, material);
   }, [geom, color, opacity]);
   useEffect19(() => {
     if (!rootObject || !mesh) return;
@@ -28474,17 +28550,17 @@ import { useEffect as useEffect21, useMemo as useMemo19, useState as useState14
 // src/hooks/useManifoldBoardBuilder.ts
 import { useState as useState13, useEffect as useEffect20, useMemo as useMemo18, useRef as useRef7 } from "react";
 import { su as su12 } from "@tscircuit/circuit-json-util";
-import * as THREE21 from "three";
+import * as THREE23 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
-import * as THREE14 from "three";
+import * as THREE16 from "three";
 function manifoldMeshToThreeGeometry(manifoldMesh) {
-  const geometry = new THREE14.BufferGeometry();
+  const geometry = new THREE16.BufferGeometry();
   geometry.setAttribute(
     "position",
-    new THREE14.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
+    new THREE16.Float32BufferAttribute(manifoldMesh.vertProperties, 3)
   );
-  geometry.setIndex(new THREE14.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
+  geometry.setIndex(new THREE16.Uint32BufferAttribute(manifoldMesh.triVerts, 1));
   if (manifoldMesh.runIndex && manifoldMesh.runIndex.length > 1 && manifoldMesh.runOriginalID) {
     for (let i = 0; i < manifoldMesh.runIndex.length - 1; i++) {
       const start = manifoldMesh.runIndex[i];
@@ -28498,7 +28574,7 @@ function manifoldMeshToThreeGeometry(manifoldMesh) {
 }
 
 // src/utils/trace-texture.ts
-import * as THREE15 from "three";
+import * as THREE17 from "three";
 import { su as su5 } from "@tscircuit/circuit-json-util";
 function isWireRoutePoint(point2) {
   return point2 && point2.route_type === "wire" && typeof point2.layer === "string" && typeof point2.width === "number";
@@ -28581,10 +28657,10 @@ function createTraceTextureForLayer({
     }
   });
   ctx.globalCompositeOperation = "source-over";
-  const texture = new THREE15.CanvasTexture(canvas);
+  const texture = new THREE17.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE15.LinearMipmapLinearFilter;
-  texture.magFilter = THREE15.LinearFilter;
+  texture.minFilter = THREE17.LinearMipmapLinearFilter;
+  texture.magFilter = THREE17.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -28592,7 +28668,7 @@ function createTraceTextureForLayer({
 
 // src/utils/silkscreen-texture.ts
 var import_text2 = __toESM(require_text(), 1);
-import * as THREE16 from "three";
+import * as THREE18 from "three";
 import { su as su6 } from "@tscircuit/circuit-json-util";
 function createSilkscreenTextureForLayer({
   layer,
@@ -28721,10 +28797,10 @@ function createSilkscreenTextureForLayer({
       ctx.stroke();
     });
   });
-  const texture = new THREE16.CanvasTexture(canvas);
+  const texture = new THREE18.CanvasTexture(canvas);
   texture.generateMipmaps = true;
-  texture.minFilter = THREE16.LinearMipmapLinearFilter;
-  texture.magFilter = THREE16.LinearFilter;
+  texture.minFilter = THREE18.LinearMipmapLinearFilter;
+  texture.magFilter = THREE18.LinearFilter;
   texture.anisotropy = 16;
   texture.needsUpdate = true;
   return texture;
@@ -28797,7 +28873,7 @@ function processNonPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, m
 
 // src/utils/manifold/process-plated-holes.ts
 import { su as su8 } from "@tscircuit/circuit-json-util";
-import * as THREE17 from "three";
+import * as THREE19 from "three";
 
 // src/utils/pad-geoms.ts
 var RECT_PAD_SEGMENTS2 = 64;
@@ -28861,7 +28937,7 @@ function createPadManifoldOp({
 }
 
 // src/utils/manifold/process-plated-holes.ts
-var COPPER_COLOR = new THREE17.Color(...colors.copper);
+var COPPER_COLOR = new THREE19.Color(...colors.copper);
 function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const platedHoleBoardDrills = [];
   const pcbPlatedHoles = su8(circuitJson).pcb_plated_hole.list();
@@ -29093,7 +29169,7 @@ function processPlatedHolesForManifold(Manifold, circuitJson, pcbThickness, mani
 
 // src/utils/manifold/process-vias.ts
 import { su as su9 } from "@tscircuit/circuit-json-util";
-import * as THREE18 from "three";
+import * as THREE20 from "three";
 
 // src/utils/via-geoms.ts
 function createViaCopper({
@@ -29126,7 +29202,7 @@ function createViaCopper({
 }
 
 // src/utils/manifold/process-vias.ts
-var COPPER_COLOR2 = new THREE18.Color(...colors.copper);
+var COPPER_COLOR2 = new THREE20.Color(...colors.copper);
 function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
   const viaBoardDrills = [];
   const pcbVias = su9(circuitJson).pcb_via.list();
@@ -29172,8 +29248,8 @@ function processViasForManifold(Manifold, circuitJson, pcbThickness, manifoldIns
 
 // src/utils/manifold/process-smt-pads.ts
 import { su as su10 } from "@tscircuit/circuit-json-util";
-import * as THREE19 from "three";
-var COPPER_COLOR3 = new THREE19.Color(...colors.copper);
+import * as THREE21 from "three";
+var COPPER_COLOR3 = new THREE21.Color(...colors.copper);
 function processSmtPadsForManifold(Manifold, circuitJson, pcbThickness, manifoldInstancesForCleanup, holeUnion) {
   const smtPadGeoms = [];
   const smtPads = su10(circuitJson).pcb_smtpad.list();
@@ -29262,8 +29338,8 @@ function createManifoldBoard(Manifold, CrossSection, boardData, pcbThickness, ma
 }
 
 // src/utils/manifold/process-copper-pours.ts
-import * as THREE20 from "three";
-var COPPER_COLOR4 = new THREE20.Color(...colors.copper);
+import * as THREE22 from "three";
+var COPPER_COLOR4 = new THREE22.Color(...colors.copper);
 var arePointsClockwise4 = (points) => {
   let area = 0;
   for (let i = 0; i < points.length; i++) {
@@ -29628,7 +29704,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Green;
         currentGeoms.board = {
           geometry: finalBoardGeom,
-          color: new THREE21.Color(
+          color: new THREE23.Color(
             matColorArray[0],
             matColorArray[1],
             matColorArray[2]
@@ -29711,16 +29787,16 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
 };
 
 // src/utils/manifold/create-three-geometry-meshes.ts
-import * as THREE22 from "three";
+import * as THREE24 from "three";
 function createGeometryMeshes(geoms) {
   const meshes = [];
   if (!geoms) return meshes;
   if (geoms.board && geoms.board.geometry) {
-    const mesh = new THREE22.Mesh(
+    const mesh = new THREE24.Mesh(
       geoms.board.geometry,
-      new THREE22.MeshStandardMaterial({
+      new THREE24.MeshStandardMaterial({
         color: geoms.board.color,
-        side: THREE22.DoubleSide,
+        side: THREE24.DoubleSide,
         flatShading: true
       })
     );
@@ -29730,11 +29806,11 @@ function createGeometryMeshes(geoms) {
   const createMeshesFromArray = (geomArray) => {
     if (geomArray) {
       geomArray.forEach((comp) => {
-        const mesh = new THREE22.Mesh(
+        const mesh = new THREE24.Mesh(
           comp.geometry,
-          new THREE22.MeshStandardMaterial({
+          new THREE24.MeshStandardMaterial({
             color: comp.color,
-            side: THREE22.DoubleSide,
+            side: THREE24.DoubleSide,
             flatShading: true
             // Consistent with board
           })
@@ -29752,21 +29828,21 @@ function createGeometryMeshes(geoms) {
 }
 
 // src/utils/manifold/create-three-texture-meshes.ts
-import * as THREE23 from "three";
+import * as THREE25 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 THREE23.PlaneGeometry(boardData.width, boardData.height);
-    const material = new THREE23.MeshBasicMaterial({
+    const planeGeom = new THREE25.PlaneGeometry(boardData.width, boardData.height);
+    const material = new THREE25.MeshBasicMaterial({
       map: texture,
       transparent: true,
-      side: THREE23.DoubleSide,
+      side: THREE25.DoubleSide,
       depthWrite: false
       // Important for layers to avoid z-fighting issues with board itself
     });
-    const mesh = new THREE23.Mesh(planeGeom, material);
+    const mesh = new THREE25.Mesh(planeGeom, material);
     mesh.position.set(boardData.center.x, boardData.center.y, yOffset);
     if (isBottomLayer) {
       mesh.rotation.set(Math.PI, 0, 0);
@@ -30422,11 +30498,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 THREE27 from "three";
+import * as THREE29 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
 // src/utils/create-geometry-from-polygons.ts
-import * as THREE24 from "three";
+import * as THREE26 from "three";
 import { BufferGeometry as BufferGeometry3, Float32BufferAttribute as Float32BufferAttribute2 } from "three";
 function createGeometryFromPolygons(polygons) {
   const geometry = new BufferGeometry3();
@@ -30440,12 +30516,12 @@ function createGeometryFromPolygons(polygons) {
         ...polygon3.vertices[i + 1]
         // Third vertex
       );
-      const v1 = new THREE24.Vector3(...polygon3.vertices[0]);
-      const v2 = new THREE24.Vector3(...polygon3.vertices[i]);
-      const v3 = new THREE24.Vector3(...polygon3.vertices[i + 1]);
-      const normal = new THREE24.Vector3().crossVectors(
-        new THREE24.Vector3().subVectors(v2, v1),
-        new THREE24.Vector3().subVectors(v3, v1)
+      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)
       ).normalize();
       normals.push(
         normal.x,
@@ -30468,10 +30544,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 THREE26 from "three";
+import * as THREE28 from "three";
 
 // src/utils/load-model.ts
-import * as THREE25 from "three";
+import * as THREE27 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";
@@ -30479,12 +30555,12 @@ async function load3DModel(url) {
   if (url.endsWith(".stl")) {
     const loader = new STLLoader2();
     const geometry = await loader.loadAsync(url);
-    const material = new THREE25.MeshStandardMaterial({
+    const material = new THREE27.MeshStandardMaterial({
       color: 8947848,
       metalness: 0.5,
       roughness: 0.5
     });
-    return new THREE25.Mesh(geometry, material);
+    return new THREE27.Mesh(geometry, material);
   }
   if (url.endsWith(".obj")) {
     const loader = new OBJLoader2();
@@ -30517,9 +30593,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         model.rotation.set(
-          THREE26.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE26.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE26.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE28.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE28.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE28.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(model);
@@ -30533,13 +30609,13 @@ async function renderComponent(component, scene) {
     );
     if (jscadObject && (jscadObject.polygons || jscadObject.sides)) {
       const threeGeom = convertCSGToThreeGeom(jscadObject);
-      const material2 = new THREE26.MeshStandardMaterial({
+      const material2 = new THREE28.MeshStandardMaterial({
         color: 8947848,
         metalness: 0.5,
         roughness: 0.5,
-        side: THREE26.DoubleSide
+        side: THREE28.DoubleSide
       });
-      const mesh2 = new THREE26.Mesh(threeGeom, material2);
+      const mesh2 = new THREE28.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -30549,9 +30625,9 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE26.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE26.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE26.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE28.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE28.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE28.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
@@ -30567,17 +30643,17 @@ async function renderComponent(component, scene) {
       if (!geom || !geom.polygons && !geom.sides) {
         continue;
       }
-      const color = new THREE26.Color(geomInfo.color);
+      const color = new THREE28.Color(geomInfo.color);
       color.convertLinearToSRGB();
       const geomWithColor = { ...geom, color: [color.r, color.g, color.b] };
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
-      const material2 = new THREE26.MeshStandardMaterial({
+      const material2 = new THREE28.MeshStandardMaterial({
         vertexColors: true,
         metalness: 0.2,
         roughness: 0.8,
-        side: THREE26.DoubleSide
+        side: THREE28.DoubleSide
       });
-      const mesh2 = new THREE26.Mesh(threeGeom, material2);
+      const mesh2 = new THREE28.Mesh(threeGeom, material2);
       if (component.position) {
         mesh2.position.set(
           component.position.x ?? 0,
@@ -30587,22 +30663,22 @@ async function renderComponent(component, scene) {
       }
       if (component.rotation) {
         mesh2.rotation.set(
-          THREE26.MathUtils.degToRad(component.rotation.x ?? 0),
-          THREE26.MathUtils.degToRad(component.rotation.y ?? 0),
-          THREE26.MathUtils.degToRad(component.rotation.z ?? 0)
+          THREE28.MathUtils.degToRad(component.rotation.x ?? 0),
+          THREE28.MathUtils.degToRad(component.rotation.y ?? 0),
+          THREE28.MathUtils.degToRad(component.rotation.z ?? 0)
         );
       }
       scene.add(mesh2);
     }
     return;
   }
-  const geometry = new THREE26.BoxGeometry(0.5, 0.5, 0.5);
-  const material = new THREE26.MeshStandardMaterial({
+  const geometry = new THREE28.BoxGeometry(0.5, 0.5, 0.5);
+  const material = new THREE28.MeshStandardMaterial({
     color: 16711680,
     transparent: true,
     opacity: 0.25
   });
-  const mesh = new THREE26.Mesh(geometry, material);
+  const mesh = new THREE28.Mesh(geometry, material);
   if (component.position) {
     mesh.position.set(
       component.position.x ?? 0,
@@ -30623,11 +30699,11 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
     padding = 20,
     zoom = 1.5
   } = options;
-  const scene = new THREE27.Scene();
+  const scene = new THREE29.Scene();
   const renderer = new SVGRenderer();
   renderer.setSize(width10, height10);
-  renderer.setClearColor(new THREE27.Color(backgroundColor), 1);
-  const camera = new THREE27.OrthographicCamera();
+  renderer.setClearColor(new THREE29.Color(backgroundColor), 1);
+  const camera = new THREE29.OrthographicCamera();
   const aspect = width10 / height10;
   const frustumSize = 100;
   const halfFrustumSize = frustumSize / 2 / zoom;
@@ -30641,11 +30717,11 @@ 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 THREE27.Vector3(lookAt.x, lookAt.y, lookAt.z));
+  camera.lookAt(new THREE29.Vector3(lookAt.x, lookAt.y, lookAt.z));
   camera.updateProjectionMatrix();
-  const ambientLight = new THREE27.AmbientLight(16777215, Math.PI / 2);
+  const ambientLight = new THREE29.AmbientLight(16777215, Math.PI / 2);
   scene.add(ambientLight);
-  const pointLight = new THREE27.PointLight(16777215, Math.PI / 4);
+  const pointLight = new THREE29.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
   const components = su14(circuitJson).cad_component.list();
@@ -30658,8 +30734,8 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
       const g = geom;
       if (!g.polygons || g.polygons.length === 0) continue;
       const geometry = createGeometryFromPolygons(g.polygons);
-      const material = new THREE27.MeshStandardMaterial({
-        color: new THREE27.Color(
+      const material = new THREE29.MeshStandardMaterial({
+        color: new THREE29.Color(
           g.color?.[0] ?? 0,
           g.color?.[1] ?? 0,
           g.color?.[2] ?? 0
@@ -30668,18 +30744,18 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
         roughness: 0.8,
         opacity: 0.9,
         transparent: true,
-        side: THREE27.DoubleSide
+        side: THREE29.DoubleSide
       });
-      const mesh = new THREE27.Mesh(geometry, material);
+      const mesh = new THREE29.Mesh(geometry, material);
       scene.add(mesh);
     }
   }
-  const gridHelper = new THREE27.GridHelper(100, 100);
+  const gridHelper = new THREE29.GridHelper(100, 100);
   gridHelper.rotation.x = Math.PI / 2;
   scene.add(gridHelper);
-  const box = new THREE27.Box3().setFromObject(scene);
-  const center = box.getCenter(new THREE27.Vector3());
-  const size2 = box.getSize(new THREE27.Vector3());
+  const box = new THREE29.Box3().setFromObject(scene);
+  const center = box.getCenter(new THREE29.Vector3());
+  const size2 = box.getSize(new THREE29.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.405",
+  "version": "0.0.406",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",