@webspatial/react-sdk 0.1.4 → 0.1.5

package/dist/default/index.js

@@ -3413,6 +3413,7 @@ function ModelBase(inProps, ref) {
   );
   const isWebEnv = !getSession();
   if (isWebEnv) {
+    const loadFailed = useRef12(false);
     useEffect16(() => {
       if (gltfSourceURL == "") {
         console.warn("Unable to display model, no gltf/glb source provided");
@@ -3421,6 +3422,7 @@ function ModelBase(inProps, ref) {
             target: { ready: false, currentSrc: gltfSourceURL }
           });
         }
+        loadFailed.current = true;
       }
     }, []);
     const myModelViewer = useRef12(null);
@@ -3443,6 +3445,7 @@ function ModelBase(inProps, ref) {
               target: { ready: false, currentSrc: gltfSourceURL }
             });
           }
+          loadFailed.current = true;
         }
       }, 500);
     }, []);
@@ -3457,6 +3460,7 @@ function ModelBase(inProps, ref) {
               target: { ready: false, currentSrc: gltfSourceURL }
             });
           }
+          loadFailed.current = true;
         }
       });
       myModelViewer.current.addEventListener("load", (event) => {
@@ -3465,6 +3469,7 @@ function ModelBase(inProps, ref) {
             target: { ready: true, currentSrc: gltfSourceURL }
           });
         }
+        loadFailed.current = false;
       });
       myModelViewer.current.addEventListener("pointerdown", (event) => {
         isDragging.current = true;
@@ -3522,27 +3527,33 @@ function ModelBase(inProps, ref) {
         );
       }
     }, [props2.contentMode, props2.resizable, props2.aspectRatio]);
-    return /* @__PURE__ */ jsx16("div", { ref, className, style, children: modelViewerExists ? /* @__PURE__ */ jsx16(
-      "model-viewer",
-      {
-        ref: myModelViewer,
-        style: {
-          width: "100%",
-          height: "100%"
-        },
-        src: gltfSourceURL,
-        "camera-controls": true,
-        "touch-action": "pan-y",
-        poster: props2.poster
-      }
-    ) : /* @__PURE__ */ jsx16(Fragment5, { children: props2.poster ? /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx16("div", { ref, className, style, children: modelViewerExists ? /* @__PURE__ */ jsxs6(Fragment5, { children: [
+      /* @__PURE__ */ jsx16(
+        "model-viewer",
+        {
+          ref: myModelViewer,
+          style: {
+            display: loadFailed.current ? "none" : "",
+            width: "100%",
+            height: "100%"
+          },
+          src: gltfSourceURL,
+          "camera-controls": true,
+          "touch-action": "pan-y",
+          poster: props2.poster
+        }
+      ),
+      loadFailed.current ? /* @__PURE__ */ jsx16(Fragment5, { children: placeHolder }) : /* @__PURE__ */ jsx16(Fragment5, { children: " " })
+    ] }) : /* @__PURE__ */ jsx16(Fragment5, { children: props2.poster ? /* @__PURE__ */ jsx16(
       "img",
       {
         className,
-        style: Object.assign(style, { objectFit: "contain" }),
+        style: Object.assign(structuredClone(style), {
+          objectFit: "contain"
+        }),
         src: props2.poster
       }
-    ) : /* @__PURE__ */ jsx16(Fragment5, {}) }) });
+    ) : /* @__PURE__ */ jsx16(Fragment5, { children: placeHolder }) }) });
   } else {
     return renderInModel3D(props, ref, usdzSourceURL, placeHolder);
   }