Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

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はレンダラーが、2種類あります。

  • WebGLRenderer
  • CanvasRenderer

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

まとめると、

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

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

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

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

f:id:gupuru:20131118195702p:plain

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

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

f:id:gupuru:20131119180059p:plain

結構、変わりますね(笑)

次に、

renderer.setSize(width, height);

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

最後に、

renderer.shadowMapEnabled = true;

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

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


前の記事   次の記事

広告を非表示にする