Merge pull request #76 from yushiang-demo/fix-texture-not-load

fix-texture-not-load

CHANGELOG.md

@@ -11,6 +11,8 @@ The format is based on [Keep a Changelog](https://github.com/olivierlacan/keep-a
 
 ### Fixed
 
+- Fix texture not load. (https://github.com/yushiang-demo/pano-to-mesh/pull/76)
+
 ### Removed
 
 ## [2.1.0] - 2024-02-18

apps/editors/decoration/index.js

@@ -32,6 +32,7 @@ const dev = process.env.NODE_ENV === "development";
 const Editor = ({ data }) => {
   const threeRef = useRef(null);
   const mediaIndexMap = useRef(null);
+  const panorama = Loaders.useTexture({ src: data.panorama });
   const [baseMesh, setBaseMesh] = useState(null);
   const [mouse, setMouse] = useState([0, 0]);
   const [camera, setCamera] = useState(null);
@@ -109,7 +110,7 @@ const Editor = ({ data }) => {
   const textureMeshProps = {
     ...data,
     layout2D,
-    panorama: Loaders.useTexture({ src: data.panorama }),
+    panorama,
   };
 
   const onLoad = useCallback((mesh) => {

apps/editors/layout2d.js

@@ -88,9 +88,11 @@ const Editor = ({ data }) => {
         )}
       </Toolbar>
       <RatioLockedDiv>
-        <ThreeCanvas {...eventHandlers} dev={dev}>
-          <PanoramaOutline {...props} />
-        </ThreeCanvas>
+        {panorama && (
+          <ThreeCanvas {...eventHandlers} dev={dev}>
+            <PanoramaOutline {...props} />
+          </ThreeCanvas>
+        )}
       </RatioLockedDiv>
     </PageContainer>
   );

apps/editors/layout3d.js

@@ -36,6 +36,7 @@ const dev = process.env.NODE_ENV === "development";
 const Editor = ({ data }) => {
   const canvas3DRef = useRef(null);
   const textureCanvasRef = useRef(null);
+  const panorama = Loaders.useTexture({ src: data.panorama });
   const [panoramaOrigin, setPanoramaOrigin] = useState(data.panoramaOrigin);
   const [floorY] = useState(data.floorY);
   const [ceilingY, setCeilingY] = useState(data.ceilingY);
@@ -58,7 +59,7 @@ const Editor = ({ data }) => {
     floorY,
     ceilingY,
     layout2D,
-    panorama: Loaders.useTexture({ src: data.panorama }),
+    panorama,
     panoramaOrigin,
   };
 
@@ -78,6 +79,8 @@ const Editor = ({ data }) => {
     canvas3DRef.current.cameraControls.focus(mesh, false, false, false);
   };
 
+  if (!panorama) return null;
+
   return (
     <>
       <ThreeCanvas dev={dev} ref={canvas3DRef}>

apps/viewer.js

@@ -20,6 +20,7 @@ const dev = process.env.NODE_ENV === "development";
 const Viewer = ({ data }) => {
   const threeRef = useRef(null);
   const [isTopView, setIsTopView] = useState(true);
+  const panorama = Loaders.useTexture({ src: data.panorama });
   const [isCameraMoving, setIsCameraMoving] = useState(false);
   const [baseMesh, setBaseMesh] = useState(null);
   const geometryInfo = useMemo(
@@ -39,7 +40,7 @@ const Viewer = ({ data }) => {
   const textureMeshProps = {
     ...data,
     layout2D,
-    panorama: Loaders.useTexture({ src: data.panorama }),
+    panorama,
   };
 
   const onLoad = useCallback((mesh) => {

packages/three/hooks/texture.js

@@ -7,7 +7,7 @@ export const useTexture = ({ src }) => {
   const [texture, setTexture] = useState(null);
 
   useEffect(() => {
-    setTexture(loader.load(src));
+    loader.load(src, setTexture);
   }, [src]);
 
   return texture;