ReactでVantaの利用

reactでVantaを使おうとした記録を残します。

モジュールのinstall

必要なモジュールをinstallします。

ターミナル

npm install three
npm install vanta

## package.jsonの確認
　　threeとvantaには互換性があるみたいなので、互換性があるものを設定します。
```:package.jsonの一部
    "three": "^0.134.0",
    "vanta": "^0.5.23",

##　jsファイルの作成
###鳥さん用

Vanta.js

// src/components/Vanta.js
import { useEffect, useRef } from "react";

const Vanta = () => {
 const myRef = useRef(null);
 const vantaEffect = useRef(null);

 useEffect(() => {
   // External script loading
   const script1 = document.createElement("script");
   script1.src =
     "https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js";
   script1.onload = () => {
     const script2 = document.createElement("script");
     script2.src =
       "https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.birds.min.js";
     script2.onload = () => {
       if (window.VANTA) {
         window.VANTA.BIRDS({
           el: myRef.current,
           mouseControls: true,
           touchControls: true,
           gyroControls: false,
           minHeight: 200.0,
           minWidth: 200.0,
           scale: 1.0,
           scaleMobile: 1.0,
           color1: 0xbcff,
         });
       }
     };
     document.body.appendChild(script2);
   };
   document.body.appendChild(script1);

   // Clean up VANTA effect on component unmount
   return () => {
     if (vantaEffect.current) {
       vantaEffect.current.destroy(); // Vantaエフェクトを適切にクリーンアップ
     }
   };
 }, []);

 return <div ref={myRef} style={{ width: "100%", height: "100vh" }} />;
};

export default Vanta;

###　fog 用

Vanta.js

// src/components/Vanta.js
import { useEffect, useRef } from "react";

const Vanta = () => {
  const myRef = useRef(null);
  const vantaEffect = useRef(null);

  useEffect(() => {
    // External script loading
    const script1 = document.createElement("script");
    script1.src =
      "https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js";
    script1.onload = () => {
      const script2 = document.createElement("script");
      script2.src =
        "https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.fog.min.js";
      script2.onload = () => {
        if (window.VANTA) {
          window.VANTA.FOG({
            el: myRef.current,
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.0,
            minWidth: 200.0,
          });
        }
      };
      document.body.appendChild(script2);
    };
    document.body.appendChild(script1);

    // Clean up VANTA effect on component unmount
    return () => {
      if (vantaEffect.current) {
        vantaEffect.current.destroy(); // Vantaエフェクトを適切にクリーンアップ
      }
    };
  }, []);

  return <div ref={myRef} style={{ width: "100%", height: "100vh" }} />;
};

export default Vanta;

雲です

Vanta.js

import { useEffect, useRef } from "react";

const Vanta = () => {
  const myRef = useRef(null);
  const vantaEffect = useRef(null); // Vantaエフェクトのインスタンスを管理するためのref

  useEffect(() => {
    // External script loading
    const script1 = document.createElement("script");
    script1.src =
      "https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js";
    script1.onload = () => {
      const script2 = document.createElement("script");
      script2.src =
        "https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.clouds.min.js";
      script2.onload = () => {
        if (window.VANTA) {
          vantaEffect.current = window.VANTA.CLOUDS({
            el: myRef.current,
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.0,
            minWidth: 200.0,
            speed: 2,
          });
        }
      };
      document.body.appendChild(script2);
    };
    document.body.appendChild(script1);

    // Clean up Vanta effect on component unmount
    return () => {
      if (vantaEffect.current) {
        vantaEffect.current.destroy(); // Vantaエフェクトを適切にクリーンアップ
      }
    };
  }, []);

  return <div ref={myRef} style={{ width: "100%", height: "100vh" }} />;
};

export default Vanta;

##　終わりに
上記の設定で意外と簡単にできました。
一番重要な点はthreeとvantaの互換性のようでした。