Three.js[1]-使用ライブラリの説明など。

少々遅れてしまったけど、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を元にシェーディングされた物で、構成してみた。

次回、ワイヤー系で何ができるかを試したものを説明する。

Submit a Comment

Spam Protection by WP-SpamFree