Open HarunoOi opened 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↓
set progressive: true
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, {}); }
https://s3-hogehoge/fugafuga/preview
createScene(viewer: MarzipanoViewer) { return viewer.createScene({ geometry: CubeImage.createGeometry(), pinFirstLevel: true, source: this.createSource(), view: createView(this.aspectRatio, this.viewParams, this.viewLimit), }); } }
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.
The preview image is placed on S3. Is that how it should be implemented?
Source code I wrote↓
set
progressive: true
multi-cube + progressive
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), }); } }