マウスで回転。擬似的3Dを実現「ThreeSixty」
ThreeSixtyはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
Web上で3Dオブジェクトを描くにはWebGLを使うのが一般的ですが、技術的には敷居が高いように感じられます。そこで画像をつなぎ合わせて擬似的な3Dを実現させているのがThreeSixtyです。
[](http://images.moongift.jp/2013/10/Screenshot 2013-10-06 20.01.22.1381148415.png)
この中央にあるのがThreeSixtyで描いたオブジェクトです。
ThreeSixtyでは予め設定としてdata-countという要素を設定します。それで幾つの画像を用意しているかを指定する仕組みです。デモでは61個の画像を使い、2度ずつ向きを変えて回転するようになっています。回転方向は水平、または垂直が指定できます。
ThreeSixtyの使い道としてぱっと思いつくのはECサイトの商品でしょうか。商品を回転させながら写真を撮れば、ユーザが自由にどの方向からでも商品を閲覧できるようになります。見た目のインパクトも相当大きいでしょう。
その他パノラマ写真を一部ずつ切り出して並べれば閲覧者が自由に回転して風景を楽しめるようになります。3Dで作り上げると難しそうなことでも、擬似的に再現するのであればThreeSixtyで十分事足りそうです。