Next.js中如何检测Spline 3D模型加载状态并实现加载动画

核心思路 #

利用@splinetool/react-spline提供的onLoad回调检测模型加载状态，结合React状态管理控制加载动画与页面内容的切换。

修改后的WelcomeComp组件代码 #

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 [isModelLoaded, setIsModelLoaded] = useState(false);

  return (
    <div className={styles.Welcome}>
      {/* 导航栏保持常驻显示 */}
      <div className="sticky top-4">
        <NavBar />
      </div>
      
      {/* 根据加载状态切换显示内容 */}
      {!isModelLoaded ? (
        // 模型未加载时，全屏显示加载动画
        <div className={`${styles.loader} flex items-center justify-center h-screen`}></div>
      ) : (
        // 模型加载完成后，显示页面内容与3D模型
        <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">
            {/* 绑定onLoad回调，模型加载完成时更新状态 */}
            <Spline 
              scene="https://prod.spline.design/-----/scene.splinecode" 
              onLoad={() => setIsModelLoaded(true)} 
            />
          </div>
        </div>
      )}
    </div>
  );
}

export default WelcomeComp;

修改后的Home组件代码 #

import WelcomeComp from "../components/WelcomeComp";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <WelcomeComp />
    </div>
  );
}

关键说明 #

• 状态控制：通过useState创建isModelLoaded状态，初始值为false，用于标记模型是否加载完成。
• Spline回调：Spline组件的onLoad属性会在3D模型完全加载并渲染完成时触发，此时将状态更新为true。
• 条件渲染：使用三元表达式判断状态，未加载时展示全屏加载动画，加载完成后展示完整页面内容。

内容的提问来源于stack exchange，提问作者Abdallah Abu sedo