@tscircuit/3d-viewer 0.0.450 → 0.0.451

package/dist/index.js

@@ -14530,12 +14530,28 @@ function MixedStlModel({
   onHover,
   onUnhover,
   isHovered,
-  scale: scale3
+  scale: scale3,
+  isTranslucent = false
 }) {
   const obj = useGlobalObjLoader(url);
   const { rootObject } = useThree();
   const model = useMemo2(() => {
     if (obj && !(obj instanceof Error)) {
+      obj.traverse((child) => {
+        if (child instanceof THREE2.Mesh && child.material) {
+          const setMaterialTransparency = (mat) => {
+            mat.transparent = isTranslucent;
+            mat.opacity = isTranslucent ? 0.5 : 1;
+            mat.depthWrite = !isTranslucent;
+            mat.needsUpdate = true;
+          };
+          if (Array.isArray(child.material)) {
+            child.material.forEach(setMaterialTransparency);
+          } else {
+            setMaterialTransparency(child.material);
+          }
+        }
+      });
       return obj;
     }
     return new THREE2.Mesh(
@@ -14546,7 +14562,7 @@ function MixedStlModel({
         opacity: 0.25
       })
     );
-  }, [obj]);
+  }, [obj, isTranslucent]);
   useEffect4(() => {
     if (!rootObject || !model) return;
     rootObject.add(model);
@@ -14639,7 +14655,8 @@ function GltfModel({
   onHover,
   onUnhover,
   isHovered,
-  scale: scale3
+  scale: scale3,
+  isTranslucent = false
 }) {
   const { renderer, rootObject } = useThree();
   const [model, setModel] = useState3(null);
@@ -14651,7 +14668,24 @@ function GltfModel({
     loader.load(
       gltfUrl,
       (gltf) => {
-        if (isMounted) setModel(gltf.scene);
+        if (!isMounted) return;
+        const scene = gltf.scene;
+        scene.traverse((child) => {
+          if (child instanceof THREE4.Mesh && child.material) {
+            const setMaterialTransparency = (mat) => {
+              mat.transparent = isTranslucent;
+              mat.opacity = isTranslucent ? 0.5 : 1;
+              mat.depthWrite = !isTranslucent;
+              mat.needsUpdate = true;
+            };
+            if (Array.isArray(child.material)) {
+              child.material.forEach(setMaterialTransparency);
+            } else {
+              setMaterialTransparency(child.material);
+            }
+          }
+        });
+        setModel(scene);
       },
       void 0,
       (error) => {
@@ -14664,7 +14698,7 @@ function GltfModel({
     return () => {
       isMounted = false;
     };
-  }, [gltfUrl]);
+  }, [gltfUrl, isTranslucent]);
   useEffect5(() => {
     if (!model) return;
     if (position) model.position.fromArray(position);
@@ -28045,7 +28079,8 @@ var JscadModel = ({
   onHover,
   onUnhover,
   isHovered,
-  scale: scale3
+  scale: scale3,
+  isTranslucent = false
 }) => {
   const { rootObject } = useThree();
   const { threeGeom, material } = useMemo4(() => {
@@ -28056,11 +28091,13 @@ var JscadModel = ({
     const threeGeom2 = convertCSGToThreeGeom(jscadObject);
     const material2 = new THREE5.MeshStandardMaterial({
       vertexColors: true,
-      side: THREE5.DoubleSide
-      // Ensure both sides are visible
+      side: THREE5.DoubleSide,
+      transparent: isTranslucent,
+      opacity: isTranslucent ? 0.5 : 1,
+      depthWrite: !isTranslucent
     });
     return { threeGeom: threeGeom2, material: material2 };
-  }, [jscadPlan]);
+  }, [jscadPlan, isTranslucent]);
   const mesh = useMemo4(() => {
     if (!threeGeom) return null;
     return new THREE5.Mesh(threeGeom, material);
@@ -28122,7 +28159,8 @@ var FootprinterModel = ({
   onHover,
   onUnhover,
   isHovered,
-  scale: scale3
+  scale: scale3,
+  isTranslucent = false
 }) => {
   const { rootObject } = useThree();
   const group = useMemo5(() => {
@@ -28140,13 +28178,16 @@ var FootprinterModel = ({
       const threeGeom = convertCSGToThreeGeom(geomWithColor);
       const material = new THREE6.MeshStandardMaterial({
         vertexColors: true,
-        side: THREE6.DoubleSide
+        side: THREE6.DoubleSide,
+        transparent: isTranslucent,
+        opacity: isTranslucent ? 0.5 : 1,
+        depthWrite: !isTranslucent
       });
       const mesh = new THREE6.Mesh(threeGeom, material);
       group2.add(mesh);
     }
     return group2;
-  }, [footprint]);
+  }, [footprint, isTranslucent]);
   useEffect7(() => {
     if (!group || !rootObject) return;
     rootObject.add(group);
@@ -28368,7 +28409,8 @@ var AnyCadComponent = ({
         scale: cad_component2.model_unit_to_mm_scale_factor,
         onHover: handleHover,
         onUnhover: handleUnhover,
-        isHovered
+        isHovered,
+        isTranslucent: cad_component2.show_as_translucent_model
       },
       cad_component2.cad_component_id
     );
@@ -28386,7 +28428,8 @@ var AnyCadComponent = ({
         scale: cad_component2.model_unit_to_mm_scale_factor,
         onHover: handleHover,
         onUnhover: handleUnhover,
-        isHovered
+        isHovered,
+        isTranslucent: cad_component2.show_as_translucent_model
       },
       cad_component2.cad_component_id
     );
@@ -28399,7 +28442,8 @@ var AnyCadComponent = ({
         scale: cad_component2.model_unit_to_mm_scale_factor,
         onHover: handleHover,
         onUnhover: handleUnhover,
-        isHovered
+        isHovered,
+        isTranslucent: cad_component2.show_as_translucent_model
       },
       cad_component2.cad_component_id
     );
@@ -28417,7 +28461,8 @@ var AnyCadComponent = ({
         scale: cad_component2.model_unit_to_mm_scale_factor,
         onHover: handleHover,
         onUnhover: handleUnhover,
-        isHovered
+        isHovered,
+        isTranslucent: cad_component2.show_as_translucent_model
       }
     );
   }
@@ -28464,7 +28509,7 @@ import * as THREE15 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.449",
+  version: "0.0.450",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",

package/package.json

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