360° Image Viewer

360°ビューアーデモ

ドラッグして製品を回転させてください。

※ 表示している画像はフリー素材の車です。ドローンの360°フリー素材が存在しないため代用しています。

01 この技術について

📸

同じ物体を少しずつ回転させながら撮影した36枚の写真を用意します。

👆

画面をドラッグした方向・量に応じて、表示する写真を瞬時に切り替えます。

🔄

写真の切り替えが素早いため、まるで物体が回転しているように見えます。

動画のように見えますが、実際には静止画（写真）を高速に切り替えているだけです。そのため読み込みが速く、どんなデバイスでも軽快に動作します。カーセンサーやECサイトの商品ページでよく使われている技術です。

STEP 1

ターンテーブル（回転台）の上に被写体を置きます。なければ地面に置いて自分が周りを歩いて撮っても大丈夫です。

STEP 2

10°ずつ回転させながら合計36枚撮影します。枚数が多いほど滑らかに見えます。最低でも24枚（15°ごと）あれば十分です。

STEP 3

撮影した画像をクラウド（AWSのS3など）にアップロードし、連番のURLで管理します。例：drone-01.jpg〜drone-36.jpg

STEP 4

このビューアーに画像URLを渡すだけで完成です。コードの変更は1行のみです。

このデモで表示している画像は、オープンソースの360°ビューアーライブラリ「Judo Spin」が公開しているフリー素材の車の画像（36枚）を使用しています。

本来はドローンの360°画像を使用したいところですが、ドローンの360°製品スピン用フリー素材は現時点では存在しないため、同じ仕組みの検証用として車の画像で代用しています。

実際のドローンに適用する場合は、機体を実際に撮影した画像に差し替えるだけで同じビューアーが完成します。