Three.js UVで割れる表現

この記事は、webgl-jp Slack内の情報を元に構成されています。

webgl-jp.slack

 

 

f:id:webgl:20180208193119j:plain

 

three.jsで一枚の画像が複数のポリゴンに分かれてバラバラになるようなエフェクトを作れますか。ガラスが割れる感じの。

 

割れるアニメーションが毎回同じで良いのであれば、Blenderとかでそういうアニメーションモデルを作ってしまって、Three.js形式で出力してThree.jsで再生するのが確実でしょうね。

ただ、シェーダーで類似の表現ができなくもないかもしれません。あまり大規模な破壊表現はできないと思いますが。

 

やりたいこととしては、ランダムに生成されるポリゴンにテクスチャを貼れるかってことですね。

 

UVをうまいこと使えば。

 

テクスチャはないですが物体破壊の公式サンプルはこちら。

https://threejs.org/examples/#webgl_physics_convex_break