繁体   English   中英

如何检查 spline api 中的 3d 模型是否已加载到 nextjs 中的 dom

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM