@ericchen1990/pano-view 0.1.3 → 0.1.4

package/dist/index.d.mts

@@ -211,6 +211,11 @@ type TileProps = {
     multires: string | TileMultiresConfig;
     /** Defaults to `${baseUrl}/previews/cube-vertical.webp`. */
     previewUrl?: string | null;
+    /**
+     * Face order in the vertical preview atlas, from top to bottom. Defaults to
+     * `l/f/r/b/u/d`.
+     */
+    previewFaceOrder?: readonly CubeFaceCode[];
     /**
      * Relative to `baseUrl`; supports krpano cube-tile `%s` and `%l` placeholders,
      * horizontal `%h`/`%x`/`%u`/`%c`, vertical `%v`/`%y`/`%w`/`%r`, and index padding
@@ -437,7 +442,7 @@ type VideoHotspotProps = HotspotCommonProps & {
 };
 declare function VideoHotspot({ id, src, playing, poster, loop, muted, volume, playsInline, preload, crossOrigin, width, height, opacity, onPlaybackStateChange, onPlaybackError, onEnded, onError, ...anchorProps }: VideoHotspotProps): react.JSX.Element;
 
-declare function Tile({ baseUrl, multires, previewUrl, urlTemplate, resolveTileUrl, maxTextureMemoryMb, maxConcurrentLoads, retryCount, loadMode, visible, onReady, onPreviewError, onLoadProgress, onTileError, onLevelChange, }: TileProps): react.JSX.Element;
+declare function Tile({ baseUrl, multires, previewUrl, previewFaceOrder, urlTemplate, resolveTileUrl, maxTextureMemoryMb, maxConcurrentLoads, retryCount, loadMode, visible, onReady, onPreviewError, onLoadProgress, onTileError, onLevelChange, }: TileProps): react.JSX.Element;
 
 declare function normalizePanoYaw(yaw: number): number;
 declare function clampPanoPitch(pitch: number): number;

package/dist/index.d.ts

@@ -211,6 +211,11 @@ type TileProps = {
     multires: string | TileMultiresConfig;
     /** Defaults to `${baseUrl}/previews/cube-vertical.webp`. */
     previewUrl?: string | null;
+    /**
+     * Face order in the vertical preview atlas, from top to bottom. Defaults to
+     * `l/f/r/b/u/d`.
+     */
+    previewFaceOrder?: readonly CubeFaceCode[];
     /**
      * Relative to `baseUrl`; supports krpano cube-tile `%s` and `%l` placeholders,
      * horizontal `%h`/`%x`/`%u`/`%c`, vertical `%v`/`%y`/`%w`/`%r`, and index padding
@@ -437,7 +442,7 @@ type VideoHotspotProps = HotspotCommonProps & {
 };
 declare function VideoHotspot({ id, src, playing, poster, loop, muted, volume, playsInline, preload, crossOrigin, width, height, opacity, onPlaybackStateChange, onPlaybackError, onEnded, onError, ...anchorProps }: VideoHotspotProps): react.JSX.Element;
 
-declare function Tile({ baseUrl, multires, previewUrl, urlTemplate, resolveTileUrl, maxTextureMemoryMb, maxConcurrentLoads, retryCount, loadMode, visible, onReady, onPreviewError, onLoadProgress, onTileError, onLevelChange, }: TileProps): react.JSX.Element;
+declare function Tile({ baseUrl, multires, previewUrl, previewFaceOrder, urlTemplate, resolveTileUrl, maxTextureMemoryMb, maxConcurrentLoads, retryCount, loadMode, visible, onReady, onPreviewError, onLoadProgress, onTileError, onLevelChange, }: TileProps): react.JSX.Element;
 
 declare function normalizePanoYaw(yaw: number): number;
 declare function clampPanoPitch(pitch: number): number;

package/dist/index.mjs

@@ -1244,7 +1244,7 @@ import {
   Vector3 as Vector32
 } from "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) {
@@ -1353,11 +1353,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
   };
 }
 
@@ -1478,7 +1478,8 @@ function usePreviewTexture(url, anisotropy, onError) {
 }
 function PreviewFace({
   face,
-  texture
+  texture,
+  faceOrder
 }) {
   const geometry = useMemo4(() => {
     const nextGeometry = new PlaneGeometry(
@@ -1486,7 +1487,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);
@@ -1497,7 +1498,7 @@ function PreviewFace({
     }
     uv.needsUpdate = true;
     return nextGeometry;
-  }, [face]);
+  }, [face, faceOrder]);
   useEffect7(
     () => () => {
       geometry.dispose();
@@ -1524,8 +1525,19 @@ function PreviewFace({
     }
   );
 }
-function PreviewCube({ texture }) {
-  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx6(PreviewFace, { face, texture }, face));
+function PreviewCube({
+  texture,
+  faceOrder
+}) {
+  return CUBE_FACES.map((face) => /* @__PURE__ */ jsx6(
+    PreviewFace,
+    {
+      face,
+      texture,
+      faceOrder
+    },
+    face
+  ));
 }
 function useManagedTexture(manager, key, url, address) {
   const [managedState, setManagedState] = useState4(() => ({
@@ -1740,6 +1752,7 @@ function Tile({
   baseUrl,
   multires,
   previewUrl,
+  previewFaceOrder = PREVIEW_FACE_ORDER,
   urlTemplate,
   resolveTileUrl,
   maxTextureMemoryMb = 128,
@@ -1923,7 +1936,13 @@ function Tile({
     commitLayers(nextLayers);
   });
   return /* @__PURE__ */ jsxs4("group", { visible, children: [
-    previewTexture ? /* @__PURE__ */ jsx6(PreviewCube, { texture: previewTexture }) : null,
+    previewTexture ? /* @__PURE__ */ jsx6(
+      PreviewCube,
+      {
+        texture: previewTexture,
+        faceOrder: previewFaceOrder
+      }
+    ) : null,
     layers.map((layer) => /* @__PURE__ */ jsx6(
       TileLayerMeshes,
       {