シーン読み込み後に表示操作を追加します。
サンプルを実行する
スターター の SDK examples を開き、モード、次の視点、回転、視点保存を試します。各操作の後に実際のシーンを確認してください。
表示モードを切り替える
公開メソッド changeMode を使い、結果を await します。この例の値は Panorama、Floorplan、Topview です。変更の完了を確認してから選択状態を更新します。
import type { Five, Mode } from "@realsee/five";
export type SceneView = Extract<Mode, "Panorama" | "Floorplan" | "Topview">;
/** Await this from a button handler; show a recoverable error on rejection. */
export async function changeView(five: Five, view: SceneView): Promise<void> {
await five.changeMode(view, undefined, { duration: 500 });
}
/** Subscribe to the completed mode change, and call the returned cleanup. */
export function watchView(
five: Five,
onChange: (view: Mode) => void
): () => void {
onChange(five.currentMode);
return five.on("mode.change", (event) => onChange(event.mode));
}Work に必要なモデルやアセットがない場合もあります。現在のシーンを保ち、失敗した操作を表示してください。すべてのシーンで全モードが使えるとは限りません。
実在する視点へ移動する
6.9.2 の実行時確認と同じく、読み込み済み Work の active || loadable が真の observer を選びます。両方の真は不要です。公開デモには active でも loadable が偽の視点があり、両方を必須にすると全候補が消えます。複数 Work の場合は panoIndex と共に workCode を保持してください。
import type { Five, Pano, Pose } from "@realsee/five";
/** Five 6.9.2 accepts active OR explicitly loadable observers, not both flags. */
export function listDestinations(five: Five): Pano[] {
return five.observers
.filter((observer) => observer.active || observer.loadable)
.map((observer) => ({
workCode: observer.work.workCode,
panoIndex: observer.panoIndex,
}));
}
export async function goToDestination(five: Five, pano: Pano): Promise<void> {
await five.moveToPano(pano, { effect: "fade", duration: 500 });
}
/** Angles use radians. This rotates/zooms without changing the panorama. */
export async function lookAt(
five: Five,
pose: Pick<Pose, "longitude" | "latitude" | "fov">
): Promise<void> {
await five.updateCamera(pose, 500);
}カメラ角度は ラジアン です。updateCamera は向き、moveToPano はパノラマを変えます。結果を予測できるよう別の UI 操作にしてください。
視点を保存して復元する
現在の状態をシリアライズ可能なスナップショットにコピーします。Three.js ベクトルを参照のまま保存しないでください。対応する Work の読み込み後に信頼するスナップショットだけを復元します。
import type { Five, State } from "@realsee/five";
import { Vector3 } from "three";
export type SavedView = Omit<State, "offset"> & {
offset: [number, number, number];
};
/** The returned value is JSON serializable and does not retain live vectors. */
export function saveView(five: Five): SavedView {
const state = five.getCurrentState();
return {
...state,
offset: [state.offset.x, state.offset.y, state.offset.z],
};
}
/** Restore only a trusted snapshot for the same loaded Work. */
export function restoreView(five: Five, view: SavedView): void {
if (view.workCode !== five.work.workCode)
throw new Error("Load the snapshot's Work before restoring its view.");
five.setState({ ...view, offset: new Vector3(...view.offset) }, true);
}保存した視点は Work 取得の権限を表しません。公開アプリはリソースを別途認可してください。
結果を確認する
Panorama → Floorplan → Panorama を切り替えます。視点を保存し、移動して復元し、位置と向きが一致するか確認します。モードの拒否とカメラ移動の成功は別々に報告してください。
次は イベントと座標 へ進みます。