[英]how to check if the 3d model from spline api is loaded to the dom in nextjs
I am trying to create a new website and I want to add a 3d model from spline, I added it but it takes some time to load so I decided to add a loader/Spinner but I did not know how to check if the 3d model is loaded or not.我正在尝试创建一个新网站,我想从样条曲线添加一个 3d 模型,我添加了它但是需要一些时间来加载所以我决定添加一个加载器/微调器但我不知道如何检查 3d 模型是否加载。
this is my component这是我的组件
import React from "react";
import styles from "../styles/Home.module.css";
import Spline from "@splinetool/react-spline";
import NavBar from "./NavBar";
function WelcomeComp() {
return (
<div className={styles.Welcome}>
<div className="sticky top-4">
<NavBar />
</div>
<div className="flex flex-row h-screen">
<div className="flex flex-col items-start justify-center">
<p className={styles.WelcomeLine1}>Hi, My name is Abdallah Zaher</p>
<p className={styles.WelcomeLine2}>Iam a Front-end developer </p>
</div>
<div className="w-1/2">
<Spline scene="https://prod.spline.design/-----/scene.splinecode" />
</div>
</div>
</div>
);
}
export default WelcomeComp;
and here I want to make the if condition if the model is loaded show the component else show the spinner在这里,如果模型已加载,我想设置 if 条件,显示组件,否则显示微调器
import WelcomeComp from "../components/WelcomeComp";
import styles from "../styles/Home.module.css";
export default function Home() {
return (
<div className={styles.container}>
<WelcomeComp />
<div className={styles.loader}></div>
</div>
);
}
Spline component supports onLoad prop, so your Spline implementation should look something like this: Spline 组件支持 onLoad 属性,因此您的 Spline 实现应如下所示:
<Spline
onLoad={()=>setLoading(false)}
scene="https://prod.spline.design/-----/scene.splinecode"
/>
To keep it simple, I recommend having the Spline component and the Loader/Spinner component together in one scope, so Spline can easily change the loading state and also the loader can easily react to it.为简单起见,我建议将 Spline 组件和 Loader/Spinner 组件放在一个范围内,这样 Spline 可以轻松更改加载状态,并且加载程序也可以轻松对其做出反应。 This is one of the possible ways how to implement it:
这是实现它的可能方法之一:
import React,{ useState } from "react";
import styles from "../styles/Home.module.css";
import Spline from "@splinetool/react-spline";
import NavBar from "./NavBar";
function WelcomeComp() {
const [loading, setLoading] = useState(true)
return (
<>
{loading && <div className={styles.loader}></div> } //if loading, show loader
<div className={styles.Welcome}>
<div className="sticky top-4">
<NavBar />
</div>
<div className="flex flex-row h-screen">
<div className="flex flex-col items-start justify-center">
<p className={styles.WelcomeLine1}>Hi, My name is Abdallah Zaher</p>
<p className={styles.WelcomeLine2}>Iam a Front-end developer </p>
</div>
<div className="w-1/2">
<Spline
onLoad={()=>setLoading(false)}
scene="https://prod.spline.design/-----/scene.splinecode"
/>
</div>
</div>
</div>
</>
);
}
export default WelcomeComp;
And of course, delete the loader div from the Home component.当然,从 Home 组件中删除 loader div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.