three.jsを使った3Dなアニメーション背景を簡単に作成、設置できるライブラリ・「Vanta.js」

Vanta.js

Vanta.jsはthree.jsを使った3DなWebGLアニメーションの背景を簡単に作成、設置できるライブラリです。

同ライブラリのプロジェクトサイト内で簡単な編集を、プレビューを確認しながらツールバーの調整だけで可能になっており、コードも提供されているのでほぼコピペで実装できます。

提供されるコードはCDNを含んだものも用意されています。

動作サンプルです。よく見かける、マウスに合わせて動くやつ。

上記は以下のようなコードが発行されたものをそのまま実装しています。

<script src="three.r119.min.js"></script>
<script src="vanta.birds.min.js"></script>
<script>
VANTA.BIRDS({
  el: "#your-element-selector",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00
})
</script>

スクリプトはCDNに変えました。指定したIDを含んだ空要素を用意すれば完成です。

手軽で良いですね。エフェクトはいろいろ用意されていますのでお好みで。ライブラリはOSSとしてソースコードも公開されています。ライセンスはMIT。

Vanta.jsGithub