少々遅れてしまったけど、three.jsでスタディしたものの説明をしておく。
スタディのインデックスを作成しておいた。
study:index
頭にthree.js:とついている物がthree.jsでのスタディになる。
particle(X)は以前作成したCANVASでのベクトルスタディだ。
今回は、主に使用ライブラリに関連すること及び以下2つを少々と説明していく。
three.js:study02
three.js:study01
まずは、githubのexamplesを参考に必要なライブラリを導入する。
HTMLファイルのスターティングとしては、HTML5boilerplateを使用し、追加ライブラリをjs/mylibs/以下に、各スタディ用のjsファイルを配置している。
<script defer src="js/mylibs/Three.js"></script> <script defer src="js/mylibs/Detector.js"></script> <script defer src="js/mylibs/RequestAnimationFrame.js"></script> <script defer src="js/mylibs/Stats.js"></script> <script defer src="js/script01.js"></script>
各ファイルを説明すると。
[Three.js]
これは、もちろんThree.jsの本体ファイル。
[Detector.js]
webGLが使えるかどうか判定し、使えなかったらメッセージを出してくれます。
こんな感じで使用する。
if ( Detector.webgl ){ threeGL = threeWebGL().init(); }else{ Detector.addGetWebGLMessage({parent: $("#stage")[0]}); }
[RequestAnimationFrame.js]
これまではアニメーションさせるのにsetIntervalやsetTimeoutを使用していたが、
よりアニメーションの再生に最適なrequestAnimationFrameというのが登場してきた。
requestAnimationFrame < よーしおまえらー、アニメーションにsetInterval使うなよー
まだNon-standardではあるが、それが使えるならば使用できるようにしたのがRequestAnimationFrame.jsだ。
requestAnimationFrame for smart animating
[Stats.js]
これはjsのパフォーマンスをFPSやMSで示してくれる。
別個にgithubも存在している。
https://github.com/mrdoob/stats.js
使用方法は、こんな感じ。
// attach the render-supplied DOM element
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
$stage.append( stats.domElement );
以上が使われているライブラリに対するざっくりした説明になる。
つぎは、簡単にスタディの説明をする。
study01のスタートポイントは、three.jsのgithub中段Usage項目及びaerotwistのチュートリアルだ。
mrdoob / three.js
GETTING STARTED WITH THREE.JS
この2つより、ワイヤーとフォンシェーディングで出来ることを作成してみた。
study02はstudy01を元にシェーディングされた物で、構成してみた。
次回、ワイヤー系で何ができるかを試したものを説明する。