Merge pull request #77 from yushiang-demo/dev

v2.1.1
yushiang-demo · Mar 5, 2024 · d45dab8 · d45dab8
2 parents 8dd1ba4 + 4f092ad
commit d45dab8
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,18 @@ The format is based on [Keep a Changelog](https://github.com/olivierlacan/keep-a
 
 ### Removed
 
+## [2.1.1] - 2024-03-05
+
+### Added
+
+### Changed
+
+### Fixed
+
+- Fix texture not load. (https://github.com/yushiang-demo/pano-to-mesh/pull/76)
+
+### Removed
+
 ## [2.1.0] - 2024-02-18
 
 ### Added
@@ -213,7 +225,8 @@ Codes without pull requests won't be recorded.
 
 ### Removed
 
-[unreleased]: https://github.com/yushiang-demo/PanoToMesh/compare/v2.1.0...HEAD
+[unreleased]: https://github.com/yushiang-demo/PanoToMesh/compare/v2.1.1...HEAD
+[2.1.1]: https://github.com/yushiang-demo/PanoToMesh/compare/v2.0.0...v2.1.0
 [2.1.0]: https://github.com/yushiang-demo/PanoToMesh/compare/v2.0.1...v2.1.0
 [2.0.1]: https://github.com/yushiang-demo/PanoToMesh/compare/v2.0.0...v2.0.1
 [2.0.0]: https://github.com/yushiang-demo/PanoToMesh/compare/v1.4.1...v2.0.0

diff --git a/apps/editors/decoration/index.js b/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) => {

diff --git a/apps/editors/layout2d.js b/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>
   );

diff --git a/apps/editors/layout3d.js b/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}>

diff --git a/apps/viewer.js b/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) => {

diff --git a/packages/three/hooks/texture.js b/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;