Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to determine if an image exists when using ImageUrlSource() ? #458

Open
HarunoOi opened this issue Jul 24, 2023 · 0 comments
Open

How to determine if an image exists when using ImageUrlSource() ? #458

HarunoOi opened this issue Jul 24, 2023 · 0 comments

Comments

@HarunoOi
Copy link

This may be a rudimentary question, but I need help.
I have implemented multi-cube and progressive display using marzipano.

At this time, the preview image may not be present.
I would like to add "preview image exists" to the condition here.

- if (tile.z === 0) {
+ if (tile.z === 0 && existsPreviewImage) {

The preview image is placed on S3.
Is that how it should be implemented?

Source code I wrote↓

  • set progressive: true
stage: { progressive: true }
  • multi-cube + progressive
import Marzipano from 'marzipano';
import { ViewParams, createView, ViewLimit } from '../view/rectilinear';
import { MarzipanoCubeGeometry, MarzipanoViewer } from '../types';

export type CubeImageType = 'cube';
export type Face = 'a' | 'b' | 'c' | 'd' | 'e' | 'f';

export type URLs = { [K in Face]: string };

export type TCubeImage = {
  urls: URLs;
  type: CubeImageType;
  equirectUrl?: string;
  viewParams?: ViewParams;
};

export default class CubeImage implements TCubeImage {
  readonly urls: URLs;
  readonly type: CubeImageType;
  readonly viewParams?: ViewParams;
  readonly aspectRatio: number;
  readonly viewLimit?: ViewLimit;

  constructor(
    { urls, type, viewParams }: TCubeImage,
    aspectRatio: number,
    viewLimit?: ViewLimit,
  ) {
    this.urls = urls;
    this.type = type;
    this.viewParams = viewParams;
    this.aspectRatio = aspectRatio;
    this.viewLimit = viewLimit;
  }

  private static createGeometry(): MarzipanoCubeGeometry {
    return new Marzipano.CubeGeometry([
      { tileSize: 512, size: 512 },
      { size: 1536, tileSize: 1536 },
    ]);
  }

  private createSource() {
    const sourceFromTile = (tile: { z: number; face: Face }) => {
      const valueFromTile = tile.face;
      const previewUrl = `https://s3-hogehoge/fugafuga/preview`;
      if (tile.z === 0) {
        const mapY = 'lfrbud'.indexOf(valueFromTile) / 6;
        return {
          url: previewUrl,
          rect: { x: 0, y: mapY, width: 1, height: 1 / 6 },
        };
      } else {
        return { url: this.urls[valueFromTile] };
      }
    };
    return new Marzipano.ImageUrlSource(sourceFromTile, {});
  }

  createScene(viewer: MarzipanoViewer) {
    return viewer.createScene({
      geometry: CubeImage.createGeometry(),
      pinFirstLevel: true,
      source: this.createSource(),
      view: createView(this.aspectRatio, this.viewParams, this.viewLimit),
    });
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant