イナヅマTVログ

サイトトップをthree.js+CSS3DRendererで作り替えました

| 1件のコメント

update 2013-12-03 14:07
早くもエラーのお知らせが…
Maximum call stack だそうです。
出るときと出ないときがあるようなのですが原因は良くわかりません。
時間を空けてアクセスいただくと動作することもあるようです。

所詮JavaScriptベースなので温かい目で見守っていただきたいと思います。

update 2013-12-02 20:07
早速だけどアップデートしました。
http://www.inazumatv.com/

DOMElementの追加をCSS3DObjectからCSS3DSpriteに変えました。
これでDOMElementは常に正面を向くようになります。
空いたところ(黒いとこ)をダブルクリックで初期値に戻すようにしました。
グリグリ動かしてダブルクリックしてみてください。
空間にランダムに配置しつつ若干球状に集約するようにしてみました。

SNSボタンを配置しました。
よろしければポチって下さいな。

inazumatv.com ver.2

長年放置状態だったサイトトップをthree.js+CSS3DRendererでリニューアル(というほどでも無いけど)してみました。
http://www.inazumatv.com/

inazumatv.com+three.js

現時点最新版の three.js rev.63 の他に
example添付の CSS3DRenderer.js と TrackballControls.js を使いました。

サイトはWordPressで構築されています。
コンテンツルート設定は http://www.inazumatv.com/contents/ にしているのでホストルートへWordPress DBデータをひっぱてくるphpファイル作成しindexにしました。

3D空間にそこそこデータがあった方が見栄えが良さそうだったので256コンテンツを表示しています。
ちょっと無謀な気もしたけど表示はできているようです。

CSS3DRendererなのでスマホでも表示できるようです。
iPhone 5でやっと動く程度なのでiPhone 4Sとかでは厳しいかもです。
iOS 7 以上 iPhone でホーム画面登録をしていただけると全画面表示になります。

ios_shot

サンプルの css3d_periodictable.html コードをほぼそのまま使っているだけのお粗末な状態を何とかしたいと思っています。
こんな単純なものだったら数時間で作れるのもthree.jsの優秀さのおかげです。

1件のコメント

  1. ピンバック: 【続・技術的なお話】サイトトップをthree.js+CSS3DRendererで作り替えました « イナヅマTVログ

コメントを残す

必須欄は * がついています