毎回テーマ的な物を設定して、少しずつThree.jsの操作に慣れて行こうと考えている。
今回はライン系で2本スタディをしてみた。
three.js:study04
three.js:study03

[three.js:study03]
three.js:study03では、githubからダウンロード出来るなかにあるexamples/webgl_lines_sphere.htmlを参考に
geometryで折れ線を引き、そのgeometryを使っていくつもラインを作成、動かすことを行なっている。
http://hvn.to/files/threejs/js/script03.js
ソースコードの74行目から103行目が、重要になる部分だ。
作成してみたところ、導入部分はラインの重なりも美しくできているのだが、しばらくすると、中央部にあまり秩序だって無い感じの塊となり今ひとつ面白みがなくなってしまう。
ここで、きっとこの手の物は秩序立てられたバランスの中にあるカオスというか、ルールのある無秩序というか、ある枠組みとランダムさのバランスがとても重要なのだと気がつく。

[three.js:study04]
秩序とランダムというヒントをもとに、three.js:study04では塊と親子を導入してみた。
http://hvn.to/files/threejs/js/script04.js
まずは塊、これはソースコードの93行目から102行目で、四角錐を作成している。

そして親子関係、これはサンプルのexamples/webgl_geometry_hierarchy2.htmlを参考に一つ一つの四角錐を連続的に親子として組み込んでいった。
104行目から169行目にあたり、2つのTHREE.Meshが大親となって動作するようにできている。
これにより、study03で起きていた無秩序感は大幅に抑えられたような気がする。

今回ので明らかとなった、秩序とランダムは、今後も終りのないテーマとして追いかけることとなりそうだ。
次回はopenGLならやっとかなきゃと、楽しみにしていたパーティクルを作成する予定だ。