Work がすでにあり、安全に表示するためのタスクです。
サンプルを実行する
スターターを実行 して SDK examples を開きます。公開シーンが Ready になり、ブラウザーのサイズを変えてもキャンバスがコンテナーに合うことを確認します。
Work はシーンのデータです。トークン、Team の VR 識別子、任意のメタデータではありません。公開 JSON と Team API 応答は load 前に parseWork を通します。
設置して破棄する
ホストに可視の幅と高さを与え、描画器を設置してから Work を読みます。cleanup を保持し、終了やシーン交換時に呼びます。
import type { Five as FiveInstance } from "@realsee/five";
export type MountedScene = {
five: FiveInstance;
dispose: () => void;
};
/** Browser only. Give host an explicit height before calling this function. */
export async function mountScene(
host: HTMLElement,
rawWork: unknown,
signal?: AbortSignal
): Promise<MountedScene> {
const { Five, parseWork } = await import("@realsee/five");
signal?.throwIfAborted();
const five = new Five({ imageOptions: { size: 512 } });
const layer = document.createElement("div");
layer.style.cssText = "width:100%;height:100%";
host.append(layer);
let disposed = false;
const resize = new ResizeObserver(() => five.refresh());
const dispose = () => {
if (disposed) return;
disposed = true;
signal?.removeEventListener("abort", dispose);
resize.disconnect();
five.dispose();
layer.remove();
};
signal?.addEventListener("abort", dispose, { once: true });
try {
five.appendTo(layer);
resize.observe(layer);
await five.load(parseWork(rawWork), "initial");
signal?.throwIfAborted();
five.refresh();
return { five, dispose };
} catch (error) {
dispose();
throw error;
}
}コンポーネントやルートのホストには AbortSignal を渡します。キャンセルはインスタンスと自身のレイヤーを解放しますが、SDK の全アセット通信が即停止する保証ではありません。
必要な読み込み段階を監視する
Work 準備完了、パノラマテクスチャー、モデル読み込み、精細モデルは別の段階です。対象の読み込み前に購読し、破棄時に解除します。
import type { Five } from "@realsee/five";
export type LoadingFeedback =
| { stage: "work"; state: "ready" }
| { stage: "panorama"; state: "loading"; progress: number }
| { stage: "panorama"; state: "ready" | "error" }
| { stage: "model"; state: "ready" | "refined" | "error" };
/** Attach before load. Progress describes an asset, not the entire app/API. */
export function watchLoading(
five: Five,
onChange: (value: LoadingFeedback) => void
): () => void {
const stop = [
five.on("works.ready", () => onChange({ stage: "work", state: "ready" })),
five.on("pano.texture.progress", ({ progress }) =>
onChange({ stage: "panorama", state: "loading", progress })
),
five.on("pano.texture.success", () =>
onChange({ stage: "panorama", state: "ready" })
),
five.on("pano.texture.error", () =>
onChange({ stage: "panorama", state: "error" })
),
five.on("models.load", () => onChange({ stage: "model", state: "ready" })),
five.on("models.refined", () =>
onChange({ stage: "model", state: "refined" })
),
five.on("model.error", () => onChange({ stage: "model", state: "error" })),
];
return () => stop.forEach((unsubscribe) => unsubscribe());
}パノラマの進捗値はそのアセットを表します。認証、全アセット、アプリ全体の架空の進捗率として表示しないでください。
結果を確認する
- パノラマまたはモデルが見え、操作に応答します。
- サイズ変更後もコンテナーに追従します。
- ルート・シーン変更で古いキャンバスと購読が削除されます。
- アセット不足はエラーを表示し、合成画像に置き換えません。