息抜きプログラミング ~ Three.js ~

  • 2015年6月15日
  • by 
息抜きプログラミング ~ Three.js ~

仕事の合間の息抜きです。

久しく 3D を触ってなかったので息抜きに「Three.js」に手を出してみました。

Three.js

JavaScript の 3D ライブラリです。
GitHub : https://github.com/mrdoob/three.js

ドキュメントもちゃんと用意されていてサンプルも沢山あるので気軽に使う事ができます。

WebGL については、
https://www.khronos.org/webgl/

3D で最初に表示させる物体と言えば「ティーポット」という先入観があります(ティーポット形状は3Dサンプルモデルの王道・・と言われています。)。

が、今回は、せっかくの息抜きなので、
「球体っぽいモデルを作成して描画する」
って方向でいきたいと思います。

「球体っぽいモデルを作成して描画する」

完成動画 :

用意する物 :

[/crayon]

今回は three.js の README に記述されているコードをベースに作成します。

1. シーンとカメラを作成する。

2. 球体っぽいモデルを構成する Vertices を作成する。

3. 球体っぽいモデルのポリゴンを構成する Indices を作成する。

4. 作成した Vertices と Indices から Geometry 作成する。

5. Material を作成する。

6. 頂点色を乱数から設定する。

7. Geometry と Material から Mesh を作成する。

大まかな流れは以上です。

細かいところは突っ込みなしでお願いします!

3D に触れるたびに学生時代にもっと線形代数の勉強を
しっかりやっとけばよかったと後悔します…

息抜きの頭の体操としてはちょうどよいので
ぜひ遊んでみてください。

コメント