JK 360°VR作品２つにそれぞれホットスポットを追加して、テキストポップアップとGoogleマップコンテンツへのジャンプをテスト的に実装したので紹介します。ホットスポット座標の取得方法も？
はじめに
JK 3DCGで制作した3Dアイドルモデル画像をGoogleストリートビューから取得したパノラマ画像と合成して制作したJK 360°VR作品２つにホットスポット矢印を追加してシーン間を移動するテストを以下の記事で紹介しています。
今回はインフォメーション・ホットスポットを追加してテキストポップアップと関連するGoogleマップ動画にジャンプする機能を実装してみたので紹介します。
ホットスポット座標を比較的簡単に取得する方法も紹介します。
JK 360°VR作品（札幌テレビ塔と時計台）
札幌テレビ塔の3Dアイドルモデル（Mizkey JK Salor）の中央にあるインフォメーション・ホットスポット（i）にマウスカーソルを移動すると「Mizkey JK Salor」がポップアップします。
ホットスポット矢印をクリックすると札幌時計台のシーンに移動し、中央のインフォメーション・ホットスポットにマウスカーソルを移動すると「Go to Google Map Video >>>」がポップアップするので、クリックするとGoogleマップの札幌時計台の動画にジャンプします。
動画を再生すると時計台の鐘の音が聴けます。
JSONスクリプト
“panorama”のURLが化けているのでご自分の画像のURLに変更してください。
{
"default": {
"firstScene": "tower",
"author": "Hiroaki Kira,Google Map",
"sceneFadeDuration": 1000
},
"scenes": {
"tower": {
"title": "TV Tower",
"hfov": 110,
"pitch":0,
"yaw": 0,
"type": "equirectangular",
"panorama": "https://jk360tour.com/wp-content/uploads/2021/09/Mizkey-JK-SL-TV-Tower-03-3840.jpg",
"autoLoad": true ,
"autoRotate": -2 ,
"compass": true ,
"northOffset": 120 ,
"hotSpotDebug": false,
"hotSpots": [
{
"pitch": 0,
"yaw": 0,
"type": "scene",
"text": "Go to Clock Tower",
"sceneId": "clock"
},
{
"pitch": 10,
"yaw": 17.8,
"type": "info",
"text": "Mizkey JK Salor"
}
]
},
"clock": {
"title": "Clock Tower",
"hfov": 110,
"yaw": 0,
"type": "equirectangular",
"panorama": "https://jk360tour.com/wp-content/uploads/2021/09/Ummy-JK-BL-Clock-Tower-01-max2.jpg",
"autoLoad": true ,
"autoRotate": -2 ,
"compass": true ,
"northOffset": 0 ,
"hotSpotDebug": false,
"hotSpots": [
{
"pitch": -10,
"yaw": -4.7,
"type": "scene",
"text": "Back to TV Tower",
"sceneId": "tower",
"targetYaw": 0,
"targetPitch": 0
},
{
"pitch": 20,
"yaw": -4.7,
"type": "info",
"text": "Listen Bell Sound >>>",
"URL": "https://goo.gl/maps/pQKCuGtYy4pmCHr38"
},
{
"pitch": 5,
"yaw": -4.7,
"type": "scene",
"text": "Enter into Room-1",
"sceneId": "room1",
"targetYaw": 0,
"targetPitch": 0
}
]
},
"room1": {
"title": "Clock Tower Room-1",
"hfov": 110,
"yaw": 0,
"type": "equirectangular",
"panorama": "https://jk360tour.com/wp-content/uploads/2021/09/Ash-Drum-Stick-stand-02-max-2.jpg",
"autoLoad": true ,
"autoRotate": -2 ,
"compass": true ,
"northOffset": 0 ,
"hotSpotDebug": false,
"hotSpots": [
{
"pitch": -10,
"yaw": 0,
"type": "scene",
"text": "Back to Clock Tower",
"sceneId": "clock",
"targetYaw": 0,
"targetPitch": 0
},
{
"pitch": 0,
"yaw": 0,
"type": "scene",
"text": "Change to Room-2 Scene",
"sceneId": "room2",
"targetYaw": 0,
"targetPitch": 0
}
]
},
"room2": {
"title": "Clock Tower Room-2",
"hfov": 110,
"yaw": 0,
"type": "equirectangular",
"panorama": "https://jk360tour.com/wp-content/uploads/2021/09/Ash-Drum-sit-01-hq.jpg",
"autoLoad": true ,
"autoRotate": -2 ,
"compass": true ,
"northOffset": 0 ,
"hotSpotDebug": false,
"hotSpots": [
{
"pitch": -10,
"yaw": 0,
"type": "scene",
"text": "Back to Clock Tower",
"sceneId": "clock",
"targetYaw": 0,
"targetPitch": 0
},
{
"pitch": 0,
"yaw": 0,
"type": "scene",
"text": "Change to Room-1 Scene",
"sceneId": "room1",
"targetYaw": 0,
"targetPitch": 0
}
]
}
}
}ホットスポット座標の取得方法
以下のようにURLでChromeブラウザータブに表示します。JSONスクリプトは前回の記事とは別のファイル（sapporo-jk-debug-1.json）を作ってメディアライブラリにアップロードしています。
右上のスリードットメニューからデベロッパーツールを開きます。
「“hotSpotDebug”: true,」がJSONスクリプトに挿入されているとデバッグモードになり、画面中央に「＋」が表示され、マウスクリックした場所の座標を右のデバッグパネルの「Console」画面から取得できます。
（Console画面上の座標と上記の設定座標はスクリーンショットの都合により少々異なります）
Googleマップ動画へのジャンプ方法
JSONスクリプトへの記述は以下です。
URLの取得はGoogleマップでジャンプ先の動画を表示して、「共有」メニューからURLを取得します。
（JSONスクリプトのURLと上記のURLはスクリーンショットの都合により異なっています）
まとめ
JK 360°VR作品２つ（札幌テレビ塔と時計台）をホットスポット矢印でシーン間の移動を可能にし、インフォメーション・ホットスポットでテキストポップアップとGoogleマップビデオへのジャンプ機能を実装したので紹介しています。
ジャンプ先は単なるURLなので、例えばYouTubeの360°VRや180°VRビデオへのジャンプや、あるいは別のシーンセットへのジャンプなどが可能なので、アイデアにより幅広い応用ができると思います。
Googleマップには室内の360°VRなどもユーザーから数多くアップロードされているので、これらを組み合わせればツアーなどの紹介を360°VRや静止画/動画で比較的容易に制作ができると思います。
ではでは、きらやん
