Javascript 如何在nextjs中使用vanta？

下面我将尝试与next.js一起使用。它与净效果完全配合，但是，当我尝试使用全球效果时，我得到

[VANTA] Init error TypeError: r.Geometry is not a constructor
    at h.onInit (vanta.globe.min.js:1)
    at h.init (vanta.globe.min.js:1)
    at new r.VantaBase (vanta.globe.min.js:1)
    at new h (vanta.globe.min.js:1)
    at r.<computed> (vanta.globe.min.js:1)

[VANTA]初始化错误类型错误：r.几何体不是构造函数
在h.onInit（vanta.globe.min.js:1）
在h.init（vanta.globe.min.js:1）
在新的r.VantaBase（vanta.globe.min.js:1）
在新h（vanta.globe.min.js:1）
在r。（vanta.globe.min.js:1）

我已经将万塔分离成一个背景组件

//Background.js
从“react”导入{useState，useRef，useffect}；
从“vanta/dist/vanta.globe.min”导入网络
从“三”中导入*作为三；
导出默认函数背景（{宽度、高度、子项}）{
常数[vantaEffect，setVantaEffect]=useState（0）；
const vantaRef=useRef（空）；
useffect（（）=>{
如果（！vantaEffect）{
塞万塔效应(
网({
三,，
艾尔：万塔雷夫电流，
})
);
}
return（）=>{
如果（vantaEffect）vantaEffect.destroy（）；
};
}，[vantaEffect]）；
返回(
{儿童}
)
}

并将这三个脚本添加到我的app.js中

import'../styles/globals.css'
从“下一个/Head”导入Head；
从“./components/Navbar”导入导航栏；
从“react”导入{useffect}；
导出默认函数App（{Component，pageProps}）{
useffect（（）=>{
constThreeScript=document.createElement（“脚本”）；
setAttribute（“id”，“threeScript”）；
threeScript.setAttribute(
“src”，
"https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"
);
document.getElementsByTagName（“head”）[0].appendChild（三脚本）；
return（）=>{
如果（三个脚本）{
threeScript.remove（）；
}
};
}, []);
返回(
头脑风暴辅导
)
}

并且像这样使用它

//索引
从“./组件/背景”导入背景；
导出默认函数Home（）{
返回(
鱼缸
)
}

---

THREE是否有问题，或者是next.js不支持vanta？

我对Halo有这个问题，所以我认为THREE对象不可用或者没有在Halo.js文件中定义

所以我去了Vanta的官方github repo，获取Halo和Net（教程效果）文件的源代码，发现Halo文件中缺少构造函数。所以我拿了一张网，放在光环文件里

constructor(userOptions) {
  THREE = userOptions.THREE || THREE;
  super(userOptions);
}

---

然后我导入我的自定义光晕文件以获得效果，它也可以工作。

有同样的问题，你找到解决方法了吗？