Pannellumのjson作成補助ツール
realrhymerPannelumとは、WEBで360度全天球画像を表示できる便利なツールです。
残念ながらWordpressの公式ディレクトリには登録されていません。
便利なPannelumですが、ホットスポットなどを配置するのに少しばかり苦労します。
JSONの記述に誤りがあると、全てが動作しなくなってしまいます。
そんなこんなで、jsonを作れるExcelツールを作成しました。
昔のウィザードリィというゲームのようなマップをイメージしてもらえればいいかと思います。
■でマップを記入して、A1セルのJSONボタンをクリックすればJSONが出力されます。
上記画像で出力されるJSONは次のとおり。
{
"default": {
"firstScene": "C2",
"author": "IRIETEC",
"sceneFadeDuration": 1000
},
"scenes": {
"C2": {
"title": "C2",
"pitch": 0,
"yaw": 0,
"type": "equirectangular",
"panorama": "https://iries.space/360/img/C2.jpg",
"autoLoad": true,
"autoRotate": 0,
"compass": true,
"northOffset": 0,
"hotSpots": [
{
"pitch": 0,
"yaw": 180,
"type": "scene",
"text": "C3",
"sceneId": "C3",
"targetYaw": 180
}
]
},
"B3": {
"title": "B3",
"pitch": 0,
"yaw": 0,
"type": "equirectangular",
"panorama": "https://iries.space/360/img/B3.jpg",
"autoLoad": true,
"autoRotate": 0,
"compass": true,
"northOffset": 0,
"hotSpots": [
{
"pitch": 0,
"yaw": 90,
"type": "scene",
"text": "C3",
"sceneId": "C3",
"targetYaw": 90
}
]
},
"C3": {
"title": "C3",
"pitch": 0,
"yaw": 0,
"type": "equirectangular",
"panorama": "https://iries.space/360/img/C3.jpg",
"autoLoad": true,
"autoRotate": 0,
"compass": true,
"northOffset": 0,
"hotSpots": [
{
"pitch": 0,
"yaw": 0,
"type": "scene",
"text": "C2",
"sceneId": "C2",
"targetYaw": 0
},
{
"pitch": 0,
"yaw": -90,
"type": "scene",
"text": "B3",
"sceneId": "B3",
"targetYaw": 270
},
{
"pitch": 0,
"yaw": 90,
"type": "scene",
"text": "D3",
"sceneId": "D3",
"targetYaw": 90
}
]
},
"D3": {
"title": "D3",
"pitch": 0,
"yaw": 0,
"type": "equirectangular",
"panorama": "https://iries.space/360/img/D3.jpg",
"autoLoad": true,
"autoRotate": 0,
"compass": true,
"northOffset": 0,
"hotSpots": [
{
"pitch": 0,
"yaw": -90,
"type": "scene",
"text": "C3",
"sceneId": "C3",
"targetYaw": 270
}
]
}
}
}
