3d-virtual-tour

3D バーチャルツアー

移動、ランドマーク、直接ナビゲーションを通じて、訪問者が場所を理解できるようにします。ルート、カメラ、部屋のラベル、コントロールの間に食い違いがないようにしてください。

ツアーのモデルを確立する

シーン、座標系、スケール、床の高さ、ドアの開口部、レンダラー、カメラコントロール、アセットの読み込み経路を確認します。既存のアーキテクチャとインタラクションを維持してください。体験に実際に必要なナビゲーションモードを選択します。

モード	カメラの制御元	ナビゲーション
ガイド付きツアー	作成済みのルートサンプラー	スクロール、再生／一時停止、または前後の立ち寄り地点
部屋への移動	作成済みの部屋のポーズまたはルートの立ち寄り地点	部屋のリスト、ホットスポット、またはフロアプラン
インスペクション	範囲を制限したオービットコントローラー	ドラッグ、ピンチ、ズーム、元の位置への復帰
フリーナビゲーション（要望がある場合）	衝突判定付きの一人称コントローラー	移動と視点操作

Seijaku のような体験では、まずガイド付きルート、部屋への移動、任意のモデルインスペクションを用意します。フリーナビゲーションは、要望がある場合、または必要な場合にのみ追加してください。オービットコントロールだけでは、歩いて移動できる室内にはなりません。元データがパノラマ画像のみの場合は、ナビゲーション可能な幾何学的な奥行きがあるかのように見せず、リンクされたパノラマ視点を使用してください。

実際の開口部を通るルートを作成する

ルートキーには進行度／時間、位置、注視点または向き、視野角を保存します。立ち寄り地点には、安定した ID、ラベル、ルート座標、関連するアセットグループを保存します。ルームリンクがレイアウト変更後も機能するよう、ルート座標をページの高さやアニメーションのクロックから独立させてください。

狭い開口部の手前、内側、奥にキーを配置します。床を基準にした目の高さを使い、床のかさ上げや段差を考慮し、曲がり角や重要な眺めの前では速度を落とします。地平線を安定させ、位置、視線、視野角が同時に大きく変化しないようにします。部屋が引き伸ばされるような広すぎるレンズより、物理的に妥当な比率を優先してください。

時間指定付きの Hermite 補間、適切なスプライン、または作成済みのアニメーションを使用します。Seijaku では、位置、視線、視野角に不均一な時間間隔の Hermite キーを使用しています。遠心スプラインも有用な選択肢ですが、どのような滑らかな曲線でも、衝突しないキーの間で角を切ることがあります。カメラのニアプレーンのクリアランスも含めて、補間後の経路全体を壁、天井、家具、ドア枠に対して確認してください。

曲線のパラメーターは、距離や移動時間と自動的に一致するわけではありません。おおむね一定の速度が重要な場合は弧長サンプリングを使用するか、立ち止まりやランドマークの見せ方を調整できるよう、セグメントの時間を意図的に設定します。インストール済みのレンダラーにおけるパラメーター化メソッドについては、Curveを確認してください。

向きのキーを使用する場合は、クォータニオンの球面線形補間で向きを補間します。注視点を補間する場合は、対象がカメラを横切ったり、カメラと一致したりして、向きが反転しないようにします。視野角またはアスペクト比が変化した場合は、投影行列を更新してください。

最終的なカメラ制御を1つのコントローラーに集約する

小規模なナビゲーションステートマシンを使用し、各フレームでカメラへの最終的な書き込みを1回だけ行います。入力は状態変更をリクエストします。ルートサンプラー、オービットコントローラー、トランジションハンドラーが、それぞれ独立してライブカメラを変更してはなりません。

インスペクションモードに入るときは、現在のルート座標、アクティブな停止地点、再生状態、およびスクロール位置のブックマークを保存します。建物の現在いる側に適したビューからインスペクションを開始します。インスペクション中はガイド付きの進行を一時停止します。

検証済みの遷移経路を使って、引き継ぎ中に位置、向き、視野角をブレンドします。屋内から屋外のオービットへの直線移動では、屋根を突き抜けることがあります。上昇する弧を描く場合も、経路の確認が必要です。安全なウェイポイントを使うか、安全に連続移動できる経路がない場合は、短いフェードを挟んで目的地へ切り替えます。オービット距離とピッチは、インスペクション対象の範囲内に制限します。

戻るときは、保存したガイド付きの状態を復元し、スクロール位置を調整して、古いドラッグ速度をクリアします。再生を再開するのは、インスペクション前に再生中だった場合だけです。無効になったコントローラーや古い減衰更新を停止し、遷移後にカメラが引き戻されないようにします。新しいナビゲーションリクエストが届いた場合は、複数のトゥイーンをキューに追加せず、現在のポーズを起点として保留中の目的地を置き換えます。

部屋、マップ、コントロールを連携させる

部屋カード、チャプターレール、フロアプランの領域、シーン内ホットスポットには、同じ停止地点レジストリーを使用します。ワールド座標からプラン座標への明確な変換を定義し、プランの垂直軸がワールドのZ軸と一致するとは限らないことに注意します。境界でのちらつきを防ぐため、ヒステリシスを設けて現在の部屋またはルート区間を強調表示します。

部屋の選択時は、安全な接続ルートに沿って移動するか、意図的にカットまたはフェードを使います。複数の壁を突き抜ける直接補間は避けてください。選択中のラベルとURLの状態がある場合は、実際の目的地と同期させます。ブラウザー履歴の更新は、フレームごとではなく、意味のあるナビゲーション時に行います。

停止地点には、セマンティックなHTMLのボタンまたはリンクを使います。また、グラフィカルなマップと並べて、キーボードで操作できる部屋リストを用意します。ホットスポットにラベルを付け、フォーカスを見える状態に保ち、終了時はインスペクション開始ボタンにフォーカスを戻します。Escapeキーと、常に表示される「戻る」ボタンでインスペクションモードを終了できるようにします。

スクロール可能なページでは、ビューアーが明示的にインタラクションモードに入るまでは、タッチジェスチャーで通常どおりスクロールできるようにします。ポインターキャプチャーとtouch-actionは、アクティブなキャンバス領域に限定します。ポインターのキャンセル、キャプチャーの喪失、ウィンドウのフォーカス喪失を処理し、終了時には以前のスクロールスタイルを復元します。フォームやページ内の無関係なコントロールの上では、ホイールやキーボードの入力を横取りしないでください。

ナビゲーションに合わせてワールドを同期する

現在のルート座標から、ルートに連動するドア、キャプション、露出を導出します。これにより、シークで戻ったり部屋へジャンプしたりしたときに、シーンがただちに正しい状態になります。タイマーだけに依存するイベントでは、シーク後にドアが閉じたままカメラの進路を塞ぐことがあります。ツアーが明示的に設定を管理する場合を除き、ユーザーが選択した季節や照明の上書き設定は維持します。

ルート上の近さに基づいて、次の部屋のアセットを事前に読み込みます。直接選択された目的地は、表示する前に読み込みます。読み込み中は実用的なプレースホルダーを表示するか、ビューを安定した状態に保ちます。任意のアセットの読み込みに失敗しても、ナビゲーションができなくならないようにします。共有テクスチャーとメッシュをキャッシュし、新しいリクエスト後は、不要になった目的地の読み込み処理をキャンセルするか、その結果を無視します。

領域の表示制御は、現在のカメラモードでも正しい場合にのみ使用します。ガイド付き経路では非表示の領域が、ビューアーのモデル周回時には見えることがあります。インスペクション中は表示状態を再計算するか、必要な領域を有効にして、壁や部屋が欠けて見えないようにします。

フリーウォークを含める場合は、歩行可能な面に沿って移動を制限し、衝突とクリアランスの確認を行います。ポインターロックで得られるのは視線入力であり、衝突判定や床面への追従ではありません。タッチユーザーにも同等の移動方法を提供し、没入型コントロールから退出する方法を見える状態にします。

モーション、読み込み、ライフサイクル

フレーム時間に基づく補間を使用し、ページを非表示にした後は時間基準をリセットします。非表示中は再生と不要なレンダリングを一時停止します。動きを抑える設定が有効な場合も、情報を得られる静止ビューを維持します。部屋ボタンでは、長いカメラ移動を必要とせず、構成済みのビューを選択できるようにします。音声はユーザーの操作後にのみ再生し、ミュート状態をページ遷移後も維持します。

レンダーループは1つだけにし、一時オブジェクトを再利用して、ポインターハンドラー内でのレイアウト読み取りや大きなメモリ割り当てを避けます。最初に開始地点の部屋を準備し、負荷の高いシーン生成、テクスチャのアップロード、シェーダーの準備は適切な段階に分散させます。カメラのフレーミングとレンダーターゲットを同時にリサイズし、カメラをジオメトリ内に移動させずに狭いビューの構図を調整します。ツアーのアンマウント時には、リスナーを削除し、ポインターキャプチャを解放して、所有するリソースを破棄します。

検証

• ルートを前後に進み、すべての開始地点、階層の変化、屋内外の切り替わりを確認します。
• リストとフロアプランの両方から各部屋を選択し、ラベル、ドア、アセット、カメラの移動先が一致することを確認します。
• 開始地点、屋内、終了地点から検査モードに入り、ドラッグ／ズームした後、保存された正確な停止位置と再生状態に戻ることを確認します。
• 別の移動先の選択、Escape、リサイズ、タブの非表示状態のいずれかで遷移を中断し、カメラを制御する対象が1つだけで、スクロールロックが解除不能にならないことを確認します。
• キーボード操作、タッチスクロール、ポインターのキャンセル、動きを抑える設定、アセット読み込みの失敗をテストします。
• デスクトップとポートレートのレイアウト、シェーダー／コンソールのエラー、開始地点の読み込み、移動先の読み込み、操作時のフレーム時間を確認します。

参考資料

Seijakuの KEYS、interp、Film、Orbit、_rooms、_plan、goTo の実装と、関連するカメラAPIについては、REFERENCES.mdを参照してください。ガイド付きウォークと屋外での検査は参考手法です。衝突判定に基づく自由歩行と、上記の追加のアクセシビリティチェックは実装上のガイダンスであり、参考資料の機能について述べたものではありません。