GINPRO / SQLの窓と銀プログラマ

(1) : ヘッダ( head要素内 )



IE では、開発者ツールが開いていないと、console.log がエラーになるので先に実装しておいて、IEWebGL を使う為の基本ツール(webglhelper.js)を『必要な時だけ読みだす』ようにしています。

(2) : Three.js を展開する部分への実装



通常ならば、container_three 内に展開されるのですが、IEWebGL の場合オブジェクトなので、代替えとして埋め込む為に、container_three 内 にスクリプトを書いています。ここでは、renderCanvas と言う名前で代替えエリアを作成して後でその部分を使うように記述します。また、ie 以外でも WebGL が使えないブラウザの為に、描画エリアとしてのこの場所にメッセージを表示するようにしています。

(3) : いろいろチェック



ちょっと不自然なコードですが、WebGLRenderingContext.hasOwnProperty('iewebgl') の挙動が一様では無かったので結果的にこうなってしまいました。もっと良い書き方があると思いますが、IE だけの為に努力しても仕方無いのでこれでいいと思います。

※ init と animate は、Three.js の開始部分です

(4) : 一番重要な部分



通常では無い対象エリアである、renderCanvas を Three.js に認識させる部分です。エリアの実装の仕方にもよりますが、本来のエリアが邪魔して renderCanvas が下のほうにズレてしまうので、強引に div を非表示にしている部分がありますが、ここは将来的には調整が必要になるかもしれません( Three.js はやたらと仕様変更があります )


関連する記事

Three.js(51) でPlane(平面)。IEWebGL をインストールすると IE でも動くサンプル