[JS][HTML5]Three.js勉強しました(iPhoneも見れるよ)

three.js

まだまだ利用できるブラウザの少ないJSを利用した3D表現ですが、必要になったので年末年始でThree.jsちょっと勉強してみました。
とにかく簡単に始めたかったのでalumicanさんの作ったThree.jsのテンプレートクラスBasicView.jsを利用しました。
動きの部分は見てもらえればわかるので割愛しますが、以前Flashで作ったものを利用しています。

まず、PCブラウザ&iPhoneなどのスマホでも見れるようにwebGLを利用せず、CanvasRendererにしました。
あとはBasicView.jsのサンプルを見ながら、Flashで作ってたものをJSに書き換えて完成。クリックイベントなどが若干ややこしいですが、これはググったらいろいろ解説が出てきたのでなんとか実装できました。
※BasicView.jsはスマホなどのタッチイベントに対応していないので、その部分はBasicView.jsに追加しました。

が、問題発生!
PCブラウザでは正常に動くのですが、スマホで確認すると動作が重い。Android端末では許容範囲ですが、iPhoneがクソ重い。まったく使えない。オブジェクトのマテリアルが単色のときは問題なかったのですが、写真をマテリアルにした途端アウト。

とりあえず、three.jsのサンプルを見てるとCSS3Dというものがあったので、物は試しでCanvasRendererからCSS3DRendererに変更して作り直しましたら、普通に動きました。サクサクです。
でも、Androidで確認したらまったく表示できませんでした。。。。なんなんでしょうか。

結論、ブラウザや端末でレンダラー別けて作るしかない!
あと、スマホのタッチイベントが意外と面倒くさいです。

一応、CanvasRendererとCSS3DRendererのサンプルアップしときます。
(ドラッグで動きます。クリックすると近寄ります。)

コメント

  1. chromeDe on 07/24/2013 at 5:59 PM said:

    chromeでCSSのデモの方の挙動がおかしいような

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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

Post Navigation