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

Question

我正在嘗試創建一個新網站，我想從樣條曲線添加一個 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>
  );
}

Answer 1

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。