[CSS3] CSS3でパノラマVR

一時期によく見かけた気がするパノラマVRをiPhone/iPadに対応できるかみたいなことをふわっと質問され、「Three.jsさんならなんとかしてくれるんじゃないでしょうかー」とよく調べもせずに答えてしまいました。

ちょっと気になったので手持ちのiPhoneで実際に動かしてみたところ、ブラウザで開いた瞬間から明らかにダメそうな空気でしたのですぐにブラウザを閉じました。恐らく実行速度とかそもそもの問題でないかと思います(まあ、これもロクに調べてないんですが)。とりあえずすいませんでした。

まあそのような訳で、以前にウワサでiPhoneではCSS3が安定してるみたいなことを聞いたような記憶があったりなかったりしたので、3D部分はCSS3にやってもらう体で試作してみました。

サンプル(iPhone、iPad、または新しめのSafariのみ)Credit: La caverne aux livres by gadl on Flickr

修正すべき所はいろいろありますが、とりあえずそれっぽいものが出来ました。要素の3D化はCSS3で、マウスドラッグ(フリック)による視点の回転はJS(jQuery)でやってます。

がしかし、そもそもがThree.jsとかPapervision3Dといった3Dエンジンを利用するやり方とは大きく異なるので、仕様によっては実現がかなり難しくなりそう。

とりあえず上記のようにグルグル回すだけのものなら簡単だということは分かったので、今回はここまで。




コメントを残す

メールアドレスが公開されることはありません。


六 × = 24

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>