Three.jsの基本②

今回は、前回に書いた「introduction.html」をもっと詳細に解説します（^^)

「introduction.html」は、こちらから見えます！
Three.jsの基本① - Three.jsを使って、作ってみた

最初のhtmlタグとかは、飛ばします（笑）
はじめに①の「webGL処理」のところから、解説します。
この部分です。

  var width, height;                                                                 
  var renderer;                                                                      
  function initThree() {
    width = document.getElementById('canvas-frame').clientWidth;                   
    height =  document.getElementById('canvas-frame').clientHeight;              
    renderer = new THREE.WebGLRenderer({antialias: true});                       
    renderer.setSize(width, height);                                            
    document.getElementById('canvas-frame').appendChild(renderer.domElement);  
    renderer.shadowMapEnabled = true;                                         
  }

まず、var width, height; は画面サイズ（縦横）を格納する変数です。
こんな感じに、widthとheightにcssで指定した画面サイズを格納しています。

 width = document.getElementById('canvas-frame').clientWidth;                   
 height =  document.getElementById('canvas-frame').clientHeight;     

で、次に、renderer(レンダラー)です。

renderer = new THREE.WebGLRenderer({antialias: true});

Three.jsはレンダラーが、２種類あります。

• WebGLRenderer

• CanvasRenderer

この２つの違いを簡単に言うと、WebGLRendererだとリッチな処理になります。CanvasRendererは雑な処理になります。
ただし、CanvasRendererは、低スペックPC,スマートフォン,タブレットで３D表示が出来ます。
WebGLRendererだと、低スペックPC,スマートフォン,タブレットでは3D表示は無理です。（頑張れば低スペックPCでも動かせます。）

まとめると、

• WebGLRenderer…リッチな処理。Three.jsの全機能が使える。
• CanvasRenderer…雑な処理。低スペックPC,スマートフォン,タブレットで３D表示可能。Three.jsの一部の機能しか使えない。

では、実際に、WebGLRendererとCanvasRendererを使った場合、どう変わるのかを試してみます。

WebGLRendererのコードと実行画面は、これです。

renderer = new THREE.WebGLRenderer({antialias: true});

CanvasRendererのコードと実行画面は、これです。

renderer = new THREE.CanvasRenderer({antialias: true});

結構、変わりますね（笑）

次に、

renderer.setSize(width, height);

こちらで、レンダラーする範囲を適応させます。この辺りは、決まり文句です。

最後に、

renderer.shadowMapEnabled = true;

これは、影をつけるか、つけないかです。
trueだと、影をつけます。falseだと、影は、つかないです。処理を軽くしたい場合、falseにするといいと思います。

今回は、これくらいにします（笑）
疲れた（笑）

前の記事　　　次の記事