Ricoh THETA Z1 (360°カメラ)で撮影したデータを使って、バーチャルツアーを制作する方法を記録しておきます。
完全無料で作成する方法をいくつか。
今回はMarzipano
ブラウザ上で直感的に作成できる。
-
撮影した画像をアップロード
（最終的にwebにあげるならwebpにするとか軽くしておく） -
データが正面向いていなければ、正面を向いて"Set initial view"
-
"Link hotspot"をクリックして遷移ボタンを追加。
次のシーン、もしくは前のシーンに飛べるよう、リンク先を設定。 -
道中に説明する対象物があれば"Info hotspot"をクリックして、対象物の上に置く。
Tool上ではtitleとtextしか入れられないけど、あとでexportした後にコードを編集して、画像とかリンクとか入れられる。
5. このSettingsの簡単な説明。Export後の実際の操作画面を設定する場所です。
- Drag / QTVR：画面を動かすように操作するのがDrag。視点を動かすように操作するのがQTVR。一般的になじみがあるのはDragかな
- Autorotate：風景が自動でゆっくり回転します。操作なしでも風景をふわーっとみれるかんじ。
- View control buttons：ドラッグの操作以外にも、矢印ボタンが出て画面操作できる。
- Fullscreen button：全画面表示ボタンのありなし。
6. 全部終わったらexportしてまるまるアップしたら完了
アップ前に確認したいとき
普通にindex.html開くだけじゃ見れないので
localhost使ってチェック。
コードの編集方法
一部を紹介します。
Marzipanoのデフォルト設定では、シーンを切り替えるたびに視点が設定したinitial viewに戻ってしまいます。
後ろ向きに歩くことができないってかんじです。
そこで、「現在の向き（yaw/pitch）を維持したまま」次のシーンへ移動できるようにしたいときは、
1. var viewer = new Marzipano.Viewer(...) の直後に、現在のシーンを追跡するための変数を定義します。
// Viewerの初期化
var viewer = new Marzipano.Viewer(panoElement, viewerOpts);
// --- 追加 ---
var currentScene = null;
// -----------
2. 関数の追記（場所：openCustomModal の終了後）
コード内にあるモーダル用の関数 closeCustomModal() { ... } の終わりの方の後に、以下の switchScene 関数を追記（または既存のものを書き換え）してください。
function switchScene(scene) {
stopAutorotate();
// 1. 切り替え前の向き（yaw, pitch）を一時保存
var yaw = 0;
var pitch = 0;
// 現在のシーンがあれば、その時の向きを保存
if (currentScene) {
yaw = currentScene.view.yaw();
pitch = currentScene.view.pitch();
}
// 2. シーンの切り替え実行
scene.scene.switchTo();
// 3. 次の描画フレームで保存した向きを反映
requestAnimationFrame(function() {
scene.view.setParameters({
yaw: yaw,
pitch: pitch
});
});
// 4. 現在のシーン変数を更新
currentScene = scene;
startAutorotate();
updateSceneName(scene);
updateSceneList(scene);
}
後日追記予定...
- 写真撮影時の注意点
- 写真撮影後の加工について
- Info hotpotの編集について
photo sphere viewer を利用した場合も記事作成予定...