按照本指南，我正在尝试将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分离为背景成分
//Background.js
import { useState, useRef, useEffect } from "react";
import NET from "vanta/dist/vanta.globe.min"
import * as THREE from "three";
export default function Background({ width, height, children }) {
const [vantaEffect, setVantaEffect] = useState(0);
const vantaRef = useRef(null);
useEffect(() => {
if (!vantaEffect) {
setVantaEffect(
NET({
THREE,
el: vantaRef.current,
})
);
}
return () => {
if (vantaEffect) vantaEffect.destroy();
};
}, [vantaEffect]);
return (
<div ref={vantaRef}>{children}</div>
)
}
并将THREE脚本添加到我的_app.js 中
import '../styles/globals.css'
import Head from "next/head";
import Navbar from "../components/Navbar";
import { useEffect } from "react";
export default function App({ Component, pageProps }) {
useEffect(() => {
const threeScript = document.createElement("script");
threeScript.setAttribute("id", "threeScript");
threeScript.setAttribute(
"src",
"https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"
);
document.getElementsByTagName("head")[0].appendChild(threeScript);
return () => {
if (threeScript) {
threeScript.remove();
}
};
}, []);
return (
<>
<Head>
<title>BrainStorm Tutoring</title>
</Head>
<Navbar />
<Component {...pageProps} />
</>
)
}
并像一样使用它
//index
import Background from "../components/Background";
export default function Home() {
return (
<Background height="400" width="400">
<h1 className="text-white text-8xl text-left p-36">Fish Bowl</h1>
</Background >
)
}
是THREE出了问题，还是next.js无法支持vanta？
我对Halo有这个问题，所以我认为THREE对象不可用，或者没有在Halo.js文件中定义。
所以我去了Vanta的官方github repo，获取了Halo和Net(教程效果(文件的来源，发现Halo文件中缺少构造函数。所以我取了Net的一个，放在Halo文件中。
constructor(userOptions) {
THREE = userOptions.THREE || THREE;
super(userOptions);
}
然后我导入我的自定义光晕文件的效果和它的工作。
我一直在玩这个，发现如果我把Three.js版本保持在122。我不明白这个错误。显然，在那之后的任何版本都有一个突破性的变化。