Three.jsのGeometryのattributesをいじってみる

Three.jsでは、ビルドインクラスに沢山のGeometry用のクラスが用意されています。 ただ、そのままの形状を使わず、少し頂点座標を動かしてみようと思います。

PlaneBufferGeometryをゆらゆらさせてみる

板状のGeometryであるPlaneGeometryを波打たせてみようと思います。 実際作ったのサンプルはこちらです。

行ごとにzのポジションを変更しているだけです。

セグメント数を変えることでゆらゆらの感じも違ってきます。

See the Pen wqaLrL by nogson (@satofaction) on CodePen.

テクスチャをはるとこんなイメージになり、テクスチャも歪んでくれます。

SphereBufferGeometryをトゲトゲさせてみる

球体のSphereBufferGeometryをトゲトゲさせてみようとおもいます。

頂点座標から単位ベクトルを取得して、特定の頂点座標だけ移動させます。

See the Pen RZZbgo by nogson (@satofaction) on CodePen.

イメージと違いましたが面白い動きになりました。

ランダムに頂点座標を動かしたりしても面白い動きになりそうです。

サンプル

まとめ

シェーダーを書かないで頂点座標をいじってみました。 やり方次第ではおもしろい表現ができそうです。

でもやっぱりシェーダーをかけてたほうがいいなと思います。