# カメラの移動を組み立てる — Dnalogel

視点移動とカメラ回転を順に実行し、完了状態を明示的に処理します。

Canonical: https://developer.realsee.ai/ja/docs/dnalogel/camera-flows
Source: https://developer.realsee.ai/ja/docs/dnalogel/camera-flows.md
Language: ja

# カメラの移動を組み立てる

ユーザー操作でパノラマへ移動し、対象へ視線を向けるには `CameraMovementPlugin` を使います。ナレーションと時間指定のスクリプトには [Vreo](https://developer.realsee.ai/ja/docs/vreo) を使ってください。

<span id="sequence-a-move-and-a-rotation" class="docs-anchor-alias" aria-hidden="true"></span>

## 移動と回転を順に実行する

[クイックスタート](https://developer.realsee.ai/ja/docs/dnalogel/quickstart) で準備した Five インスタンスとカメラコントローラーを使います。現在の Work に存在するパノラマ index を渡してください。

```ts title="examples/sdk-guides/src/dnalogel/camera.ts"
import { Five } from '@realsee/five'
import type { CameraMovementPlugin } from '@realsee/dnalogel'

type CameraController = ReturnType<typeof CameraMovementPlugin>

export async function moveAndLook(five: Five, camera: CameraController, panoIndex: number) {
  const moved = await camera.move({ mode: Five.Mode.Panorama, panoIndex }, 1200, { preload: true })
  if (!moved) return false
  return camera.rotate({ panoIndex, longitude: Math.PI / 2, latitude: 0, fov: five.state.fov }, 1000)
}
```

時間はミリ秒、経度・緯度はラジアンです。公開実装は角度と一緒に視野角も補間するため、例では現在の視野角を明示的に保持しています。

次のカメラ操作を始める前に結果を await します。アニメーション中断時に `false` を返し、移動取り消し時に reject する場合があります。呼び出し側で両方を処理し、`finally` で操作を復元してください。

<span id="avoid-competing-controllers" class="docs-anchor-alias" aria-hidden="true"></span>

## コントローラーの競合を防ぐ

実行中は重複操作を無効にします。ユーザー操作、別のカメラ命令、シーン交換で遷移が中断される場合があります。呼び出しだけで到着したと判断せず、キャンセル時に現在の視点を保つか開始時に戻すかを定めてください。

<span id="verify" class="docs-anchor-alias" aria-hidden="true"></span>

## 確認する

異なる 2 つの視点から実行し、最終パノラマと向きを確認します。操作で中断し UI が復帰すること、新しい Work の index で再実行できることも確認してください。

[公開されている移動の型定義](https://unpkg.com/@realsee/dnalogel@3.81.10/libs/CameraMovementPlugin/typing.d.ts) · [公開実装](https://unpkg.com/@realsee/dnalogel@3.81.10/libs/CameraMovementPlugin/CameraMovementPlugin.js)