如何在React中后台加载Spline 3D场景？

可以利用@splinetool/react-spline提供的onLoad回调事件监听场景加载完成状态，结合React状态管理实现加载器的显示与隐藏，具体实现如下：

import { useState } from 'react';
import Spline from '@splinetool/react-spline';

export default function App() {
  // 管理加载状态，初始为加载中
  const [isLoading, setIsLoading] = useState(true);

  // 场景加载完成时触发，更新状态
  const handleSceneLoad = () => {
    setIsLoading(false);
  };

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      {/* 加载器：状态为true时显示 */}
      {isLoading && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          background: '#fff',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          zIndex: 9999
        }}>
          {/* 可替换为自定义加载动画/Spinner */}
          <div style={{
            width: '50px',
            height: '50px',
            border: '4px solid #f3f3f3',
            borderTop: '4px solid #3498db',
            borderRadius: '50%',
            animation: 'spin 1s linear infinite'
          }}></div>
          <style>{`
            @keyframes spin {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            }
          `}</style>
        </div>
      )}

      {/* Spline场景：加载完成后显示，绑定加载完成回调 */}
      <Spline
        scene="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode"
        onLoad={handleSceneLoad}
        style={{ display: isLoading ? 'none' : 'block', width: '100%', height: '100%' }}
      />
    </div>
  );
}

关键说明： #

• onLoad是Spline React组件内置的回调，当3D场景完全加载渲染完成后触发，这是最可靠的加载完成判断方式，比手动用Promise监听更准确。
• 通过isLoading状态控制加载器和Spline场景的显隐，避免场景加载过程中出现空白或未渲染完成的异常状态。
• 加载器样式可根据网站风格自定义，也可以直接替换为项目中已有的Spinner组件。

之前的懒加载方案无效，大概率是因为仅延迟了Spline组件的加载，未监听场景本身的加载完成状态；而useEffect的Promise方案如果未正确绑定Spline的加载事件，也无法准确捕获加载完成时机，使用官方提供的onLoad回调是最直接有效的解决方式。

内容的提问来源于stack exchange，提问作者Rohit Nandagawali