[英]how to check if the 3d model from spline api is loaded to the dom in nextjs
我正在尝试创建一个新网站,我想从样条曲线添加一个 3d 模型,我添加了它但是需要一些时间来加载所以我决定添加一个加载器/微调器但我不知道如何检查 3d 模型是否加载。
这是我的组件
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;
在这里,如果模型已加载,我想设置 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 组件支持 onLoad 属性,因此您的 Spline 实现应如下所示:
<Spline
onLoad={()=>setLoading(false)}
scene="https://prod.spline.design/-----/scene.splinecode"
/>
为简单起见,我建议将 Spline 组件和 Loader/Spinner 组件放在一个范围内,这样 Spline 可以轻松更改加载状态,并且加载程序也可以轻松对其做出反应。 这是实现它的可能方法之一:
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;
当然,从 Home 组件中删除 loader div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.