週末はレストランやコンビニのお菓子のことを書いています。この広告は、90日以上更新していないブログに表示しています。Three.jsを使って、作ってみた最初のhtmlタグとかは、飛ばします(笑)はじめに1の「webGL処理」のところから、解説します。画面サイズ(縦横)を格納する変数です。こんな感じに、widthとheightにcssで指定した画面サイズを格納しています。次に、renderer(レンダラー)です。true});Three.jsはレンダラーが、2種類あります。WebGLRendererCanvasRendererこの2つの違いを簡単に言うと、WebGLRendererだとリッチな処理になります。CanvasRendererは雑な処理になります。CanvasRendererは、低スペックPC,スマートフォン,タブレットで3D表示が出来ます。WebGLRendererだと、低スペックPC,スマートフォン,タブレットでは3D表示は無理です。(頑張れば低スペックPCでも動かせます。)まとめると、WebGLRenderer...リッチな処理。Three.jsの全機能が使える。CanvasRenderer...雑な処理。低スペックPC,スマートフォン,タブレットで3D表示可能。Three.jsの一部の機能しか使えない。実際に、WebGLRendererとCanvasRendererを使った場合、どう変わるのかを試してみます。WebGLRendererのコードと実行画面は、これです。true});CanvasRendererのコードと実行画面は、これです。height);こちらで、レンダラーする範囲を適応させます。この辺りは、決まり文句です。true;これは、影をつけるか、つけないかです。trueだと、影をつけます。falseだと、影は、つかないです。処理を軽くしたい場合、falseにするといいと思います。視点の切り替え今回は、Three.jsの「視点の切り替え方法」について書きます。今回は、Three.jsで「2画面表示させる方法」を書きます。FlyControls.js今回は、Three.jsの「FlyControls.js」について書きます。OrbitControls.js今回は、Three.jsの「OrbitControls.js」について書きます。Linkプロフィールid:gupuruプログラミング関連の事を色々書いています(^^)週末はレストランやコンビニのお菓子のことを書いています。