three.js練習 ボロノイ

ボロノイ

やりたかったこと

ゲームで敵とエンカウントした際の演出で画面が割れるようなエフェクトがあると思います。それをイメージして作りました。

結果

gifアニメ

作品URL: https://hittaito.github.io/three-practice/day14/index.html
ソース: https://github.com/hittaito/three-practice/tree/main/src/day14

使用ライブラリ

参考に記載している作品を頼りにcannon-esとd3-delaunayを使用

GitHub - pmndrs/cannon-es: 💣 A lightweight 3D physics engine written in JavaScript.

GitHub - d3/d3-delaunay: Compute the Voronoi diagram of a set of two-dimensional points.

反省点、感想

綺麗に破片を散らばらせることができなかった。opaticyとかでフェードアウトも考えたがそれも納得いくようなものにはなっていない。

物理エンジンのcannon-esは正直今回のケースでは要らなかった。cannon-esの使用上インスタンシングなどを行っていないため、パフォーマンスが気になったが100個程度なら問題なく動いた。

参考

neort.io