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の互換性のようでした。