如何在React Router中实现3D元素渲染时精准停止的加载屏？

核心思路 #

借助Spline React组件的加载/渲染回调事件，配合React状态管理控制加载屏的显示与隐藏，精准匹配3D元素的渲染时机。

具体实现步骤 #

1. 初始化加载状态：用useState将加载状态设为true，确保页面初始时显示加载屏。
2. 绑定Spline回调事件：给Spline的<Scene>组件绑定对应事件，触发时切换加载状态为false，关闭加载屏。
3. 编写加载屏样式：通过固定定位让加载屏覆盖整个页面，遮挡未加载完成的内容。

代码示例 #

先确认已安装Spline React依赖：

npm install @splinetool/react-spline

组件实现代码：

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

function Portfolio() {
  const [isLoading, setIsLoading] = useState(true);

  // 场景资源加载完成时触发，适合多数场景
  const handleSceneReady = () => {
    setIsLoading(false);
  };

  // 如需精准捕捉第一帧渲染瞬间，使用这个回调（仅触发一次）
  // const handleFirstRender = () => {
  //   if (isLoading) setIsLoading(false);
  // };

  return (
    <>
      {/* 加载屏 */}
      {isLoading && (
        <div style={{
          position: 'fixed',
          inset: 0,
          backgroundColor: '#fff',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          zIndex: 9999,
          transition: 'opacity 0.3s ease'
        }}>
          {/* 可替换为自定义加载动画 */}
          <span style={{ fontSize: '1.2rem' }}>加载中...</span>
        </div>
      )}

      {/* Spline 3D场景 */}
      <Scene
        url="你的Spline场景URL"
        onLoad={handleSceneReady}
        // 精准监听第一帧渲染时，替换为下面的事件
        // onRenderFrame={handleFirstRender}
      />
    </>
  );
}

export default Portfolio;

补充说明 #

• onLoad事件在Spline场景资源加载完毕、准备渲染时触发，满足大多数场景的需求；
• onRenderFrame会在每一帧渲染时执行，通过判断加载状态可以精准捕捉第一帧渲染的瞬间；
• 加载屏的样式可根据作品集风格自定义，比如添加SVG加载动画、调整背景色或文字样式。

内容的提问来源于stack exchange，提问作者Htet Ah Yan