Three.js Detector.js

今回は、Three.jsの「Detector.js」について書きます。

Detector.jsは、WebGL未サポートブラウザへの対応です。
未対応のブラウザで閲覧した場合に、このようなエラーを表示するものです。
f:id:gupuru:20140104223535p:plain
英語のメッセージと情報へのリンクが表示されます。

Detector.jsを使うメリットは、ブラウザがwebGLに非対応かどうかの検証するコードを自分で書かなくていい所です。

ここからは、実装方法を書いていきます。

まず、Detector.jsのファイルの場所から書いていきます。
Detector.jsのファイルは、Three.jsダウンロードフォルダ内の
examples/js/Detector.js
にあります。

次に、読み込み方法です。
Three.jsのファイル読み込み後に、

<script src="Detector.js"></script>

を追加します。

次に、レンダラーを初期化する前に、こちらを追加します。

  if(!Detector.webgl) Detector.addGetWebGLMessage();

こんな感じに追加すれば、大丈夫だと思います↓↓

if(!Detector.webgl) Detector.addGetWebGLMessage();

//レンダラーの初期化
renderer = new THREE.WebGLRenderer({antialias: true});         
renderer.setClearColor(0xFFFFFF, 1);               
renderer.setSize(window.innerWidth,window.innerHeight);

以上で、終わりです。
とても簡単（笑）

これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました！