@ericchen1990/pano-view 0.1.3 → 0.1.5

package/README.md

@@ -65,7 +65,18 @@ export function TileExample() {
 }
 ```
 
-The first `multires` value is the tile size. Remaining values are ascending cube-face sizes for `l1`, `l2`, and later levels. The default preview is `${baseUrl}/previews/cube-vertical.webp`, with faces stacked as `f/r/b/l/u/d`.
+The first `multires` value is the tile size. Remaining values are ascending cube-face sizes for `l1`, `l2`, and later levels. The default preview is `${baseUrl}/previews/cube-vertical.webp`, with six square faces stacked from top to bottom as `l/f/r/b/u/d`. Use `previewFaceOrder` when an atlas uses a different order:
+
+```tsx
+<Tile
+  baseUrl="/panoramas/room"
+  multires="512,1000,2000"
+  previewUrl="/panoramas/room/previews/cube-vertical.webp"
+  previewFaceOrder={["l", "f", "r", "b", "u", "d"]}
+/>
+```
+
+`previewFaceOrder` must list the six face codes in their top-to-bottom atlas order: `f`, `r`, `b`, `l`, `u`, and `d`.
 
 During rapid rotation or zoom, loaded tiles remain visible while newly visible tiles use their parent level or the preview as a local fallback.
 

package/dist/index.cjs

@@ -1208,7 +1208,7 @@ var import_three7 = require("three");
 // src/tile/face-layout.ts
 var import_three6 = require("three");
 var CUBE_FACES = ["f", "r", "b", "l", "u", "d"];
-var PREVIEW_FACE_ORDER = ["f", "r", "b", "l", "u", "d"];
+var PREVIEW_FACE_ORDER = ["l", "f", "r", "b", "u", "d"];
 var CUBE_RADIUS = DEFAULT_PANORAMA_RADIUS;
 function getFaceTransform(face, radius = CUBE_RADIUS) {
   switch (face) {
@@ -1317,11 +1317,11 @@ function getPreferredLevel(levels, viewportHeight, pixelRatio, verticalFov, curr
   }
   return currentLevel;
 }
-function previewAtlasVRange(face) {
-  const index = PREVIEW_FACE_ORDER.indexOf(face);
+function previewAtlasVRange(face, faceOrder = PREVIEW_FACE_ORDER) {
+  const index = faceOrder.indexOf(face);
   return {
-    offset: (PREVIEW_FACE_ORDER.length - index - 1) / PREVIEW_FACE_ORDER.length,
-    scale: 1 / PREVIEW_FACE_ORDER.length
+    offset: (faceOrder.length - index - 1) / faceOrder.length,
+    scale: 1 / faceOrder.length
   };
 }
 
@@ -1442,7 +1442,8 @@ function usePreviewTexture(url, anisotropy, onError) {
 }
 function PreviewFace({
   face,
-  texture
+  texture,
+  faceOrder
 }) {
   const geometry = (0, import_react7.useMemo)(() => {
     const nextGeometry = new import_three7.PlaneGeometry(
@@ -1450,7 +1451,7 @@ function PreviewFace({
       PREVIEW_RADIUS * 2
     );
     const uv = nextGeometry.getAttribute("uv");
-    const { offset, scale } = previewAtlasVRange(face);
+    const { offset, scale } = previewAtlasVRange(face, faceOrder);
     const inset = scale / 512;
     for (let index = 0; index < uv.count; index += 1) {
       const sourceV = uv.getY(index);
@@ -1461,7 +1462,7 @@ function PreviewFace({
     }
     uv.needsUpdate = true;
     return nextGeometry;
-  }, [face]);
+  }, [face, faceOrder]);
   (0, import_react7.useEffect)(
     () => () => {
       geometry.dispose();
@@ -1488,8 +1489,19 @@ function PreviewFace({
     }
   );
 }
-function PreviewCube({ texture }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PreviewFace, { face, texture }, face));
+function PreviewCube({
+  texture,
+  faceOrder
+}) {
+  return CUBE_FACES.map((face) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    PreviewFace,
+    {
+      face,
+      texture,
+      faceOrder
+    },
+    face
+  ));
 }
 function useManagedTexture(manager, key, url, address) {
   const [managedState, setManagedState] = (0, import_react7.useState)(() => ({
@@ -1704,6 +1716,7 @@ function Tile({
   baseUrl,
   multires,
   previewUrl,
+  previewFaceOrder = PREVIEW_FACE_ORDER,
   urlTemplate,
   resolveTileUrl,
   maxTextureMemoryMb = 128,
@@ -1887,7 +1900,13 @@ function Tile({
     commitLayers(nextLayers);
   });
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PreviewCube, { texture: previewTexture }) : null,
+    previewTexture ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      PreviewCube,
+      {
+        texture: previewTexture,
+        faceOrder: previewFaceOrder
+      }
+    ) : null,
     layers.map((layer) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       TileLayerMeshes,
       {