three.jsのオブジェクトをfor文で生成した話

こんにちは、武田です。

webGL関連を触ることがあり、
この辺やってなかったなと思ったのがきっかけで、
お試しでthree.jsを使ってみました。

以前作ったペーパークラフトを、
写真に撮り、ハーフトーン化(?)しました。
[demo]

お試しなので、雑な部分はお許しを。。。

three.jsの基本的な使い方はいろんな方が書かれているので、
そちらを見てみてください。

1.ルート用オブジェクトを作る

ただ作るだけだと動きがなく、
3Dにする意味が薄かったので、Y軸で回転させることにしました。

今回はfor文でドットを生成するため、個別で回転させるのは無茶です。

そのため、ルート用オブジェクトを親にして、そのオブジェクトを回転させます。

2.画像の階調を配列に入れる

画像をグレースケールにして、階調をピクセルごとに配列に入れていきます。

この部分だけで、画像サイズの42 × 42 = 1764行あります。
長過ぎるのでカットします。

3.配列からsphereオブジェクトを生成

まずはオブジェクト用のマテリアルを作ります。

あとはfor文で配列に入れられた階調を取り出し、
sphereのサイズに変換してルートに配置していきます。

eval()でsphereの変数を動的生成して、ルートに配置していきます。

x座標のスタートがルートの位置になってしまうので、
真ん中で回転するように、位置を調整しています。

あとはルートをY軸回転させて、レンダリングします。

こんなメチャクチャな処理を入れても、負荷が少ないので、
素直にwebGLスゲーって感想でした。

それではまた!

この記事を書いた人

武田 ヒロキ

Webデザイナー/ディレクター Web関連をメインに担当しています。データにちょっとうるさい。 ドアを開けるときは右手で開けて右手で閉める派