google / marzipano

A 360° media viewer for the modern web.
http://www.marzipano.net
Apache License 2.0
1.99k stars 995 forks source link

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

Open HarunoOi opened 1 year ago

HarunoOi commented 1 year ago

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↓

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), }); } }