イナヅマTVログ

【続・技術的なお話】サイトトップをthree.js+CSS3DRendererで作り替えました

| 0件のコメント

サイトトップをthree.js+CSS3DRendererで作り替えました
http://www.inazumatv.com/
眠れない日曜深夜に勢いで作ってみたのを改めて各ブラウザでチェックしてみると色々と問題がありました。

実案件に使うには勇気と対応ブラウザの選別が重要だと思いました。
three.js 63

IE 9

IE 9はthree.jsからエラーが出てJavaScript自体が機能していません。
three.jsが内部計算に使用しているFloat32Arrayに未対応のためのようです。
MDN: Float32Array
*どうでもいいけどMDNデザイン変わってました。

IE 11

IE 11はCSS3DSpriteの正面表示とz深度表示がうまくいってないようです。
Cameraが横に移動すると奥行きの表示ができず全体が平たく見えてしまいます。
CSS3DSpriteの設定が無視されています。
正面にCameraを固定するとそれらしく見えるので TrackballControls.js での Camera 移動と矛盾が出ているのかもしれません。
親DOMElementに設定されている transform-style: preserve-3d; へ対応できていない影響があるのかもです。
caniuse.com: CSS3 3D Transforms
MSDN: The transform-style property

レンダリングは相当遅く DOMElement の数を減らしても若干の向上しかみられないのは CSS3 transform 計算が苦手なのかもです。
テスト環境がVM上のWindows 8.1のせいな可能性大ですけど。

CSS3DRenderer

CSS3DRenderer は three.js 標準機能ではなくアーカイブの examples フォルダー内にあります。
使い方を工夫すれば iOS, Android などスマホでも使用できる優れものです。

Object3D に代わり CSS3DObject, CSS3DSprite のどちらかが使用可能です。
DOMElement の CSS transform プロパティへ translate3D( -50% -50% 0px ) を付与し matrix3d で表示コントロールをしています。

CSS3DSprite 使用時はレンダリング時に常に正面を向く(lookAt)計算を行っています。
コードを見ると CSS3DObject を使う方が処理が軽そうです。

CSS3DRenderer は優れものですが注意点もあります。
examples 内のコードは本体と比較するとコードクオリティが劣っているように見受けられます。
あたりまえでしょうけど。
最適化の余地も残されていそうです。
three.js そのものが後方互換のないバージョンアップを行うことが多いので examples フォルダ内のコード使用はなおのこと注意が必要だと思います。
自己責任でお使いください。

コメントを残す