読み込み中です! しばらくお待ちください。

HTMLのみでVanta.jsを簡単に実装!


HTMLのみで埋め込み可能な3DCG,Vanta.js



WEB上で超簡単に3DCGを利用できるライブラリ、Vanta.js。使い方は、HTMLでThree.jsと利用したいVanta.jsのライブラリを読み込むだけ!

Vanta.jsの公式サイトから使いたいデザインのコードをコピペするだけ!three.jsと、vantaのライブラリもCDNをそのままコピペできます!

この記事を読めば、10分もかからずにWEB上でリッチな表現が導入できます!

2分で読めるこの記事を読んであなたもクリエイティブコーダーの一員に!!


Vanta.js公式サイト



Vanta.js公式サイト


まず、Vanta.js公式サイトを訪れ、実装したいアニメーションの種類を選びます!

上の画像はCloudsというアニメーションで、右のCusomizeタブから、直感的に空の色や、
雲の色、雲の影の色など変更を加えることができます!
是非ご自身で使いたいデザインを模索してみてください。


HTMLの準備



まずご自身のPCのどこでもいいので、一枚のHTMLをエディターで開いてください。
そして、bodyタグの一番上にvantaを描画するスペースをdivで作ります!

<div id="your-element-selector"></div>

id名を”your-element-selector”にすると、
公式サイトのコピペのみでvanta.jsが動きます!

次にvanta.jsを動かす二つのライブラリをインポートします。

今回は、インターネット経由で簡単にライブラリのインポートができる、CDN(コンテンツデリバリーネットワーク)を使用します!

CDNは、先ほどのvanta.jsの右側のCustomizeタブに書いてあるものをコピペしてください!

*"instructions for Strikingly.com"と書いてある水色の文字を押すとCDNのコードが出てきます!

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js">script>

CDNの二つのコードをコピペできたら、先ほどのdivタグの下に貼り付けます!

最後に、ご自身でカスタマイズしたVantaのコードを貼り付けます!

では、公式サイトより、先ほどと同じ箇所の水色の文字 *"general instructions"をクリックします!

<script>
VANTA.CLOUDS({
el: "#your-element-selector",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
skyColor: 0xd78868
})
</script>

そして、三つ目のScriptタグ(Vanta.jsのインスタンス)をコピペします。

先ほどの二つのライブラリの下に丸ごとペーストしましょう!
body内の記述はこのようになっているはずです!

<div id="your-element-selector"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js">script>

<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js">script>

<script>
VANTA.CLOUDS({
el: "#your-element-selector",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
skyColor: 0xd78868
})
</script>


Vanta.jsを用いた表現の完成!



お疲れ様です!完成しました!!

上記のコードを貼り付けるだけでも、雲の表現をブラウザで表示することができます☺️

今回は、雲の3DCG表現を扱いましたが、vanta.jsは他にも様々なCG表現を
上記と全く同じ要領で扱うことができます!

Webサイトのデザインなどをされてらっしゃる方は、是非取り入れてみてください!!
これは私の作成したサンプルサイトですが、vantaひとつで幻想的な世界観が増しました。

このような表現ひとつで、サイトの閲覧者もクライアントもワクワクしてくれますよ☺️

これからもクリエイティブコーディングの面白さを発信していきます!

私のツイッターや、このブログサイトのフォローをよろしくお願いいたします!

次の記事を読む