解决 React Three Fiber 中 3D 模型滚动时重复加载的问题-js教程-PHP中文网

解决 React Three Fiber 中 3D 模型滚动时重复加载的问题

React Three Fiber 应用中，因 useEffect 缺少依赖数组导致组件频繁重渲染，进而触发 GLTF 模型反复卸载与重载，造成视觉“刷新”闪烁；正确添加空依赖数组可确保副作用仅执行一次。

react three fiber 应用中，因 `useeffect` 缺少依赖数组导致组件频繁重渲染，进而触发 gltf 模型反复卸载与重载，造成视觉“刷新”闪烁；正确添加空依赖数组可确保副作用仅执行一次。

在使用 @react-three/fiber 和 @react-three/drei 构建 3D 交互页面时，一个常见却容易被忽视的问题是：滚动过程中 3D 模型不断“重绘”或“闪退”——表面看是 Canvas 刷新，实则是模型组件被反复卸载与重建。从你提供的代码和视频可见，被嵌套在随滚动动态调整 transform 的

内，而问题根源并不在 CSS 动画，而在于 React 的渲染机制与 useEffect 的误用。

? 根本原因：useEffect 缺失依赖数组引发无限重执行

你的两处 useEffect 均未传入第二个参数（依赖数组）：

useEffect(() => { /* ... */ }); // ❌ 无依赖数组 → 每次渲染都执行
useEffect(() => { /* ... */ }); // ❌ 同样触发高频重绑定 scroll 事件

这会导致：

每次状态更新（如 scrollY 变化）都重新执行 useEffect；
window.addEventListener('scroll', ...) 被重复注册，事件监听器堆积；
更关键的是： 组件在每次父组件重渲染时被完全卸载并重建，useGLTF("model.glb") 重新触发加载逻辑（即使已缓存），scene 实例被销毁再创建，造成 Canvas 内容“闪烁式重载”。

✅ 正确解法：为 useEffect 添加空依赖数组 []

将两个 useEffect 显式声明为“仅在挂载时执行一次”：

// ✅ 监听滚动并更新 scrollY —— 仅挂载时绑定/解绑
useEffect(() => {
  const handleScroll = () => setScrollY(window.scrollY);
  handleScroll(); // 初始化
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []); // ← 关键：添加空数组

// ✅ 绑定滚动驱动的 DOM transform —— 注意：此处逻辑本身有性能缺陷（见下文），但至少避免重复注册
useEffect(() => {
  const fridge = document.getElementById('fridge');
  if (!fridge) return;

  const handleScroll = () => {
    // ⚠️ 注意：此处原代码存在严重性能问题（见下方说明）
    fridge.style.transform = `translateX(${-scrollY}px)`; // 简化为单次赋值
  };

  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []); // ← 同样必须加 []

? 为什么 [] 能解决问题？
React Hook 规则要求：若 useEffect 不依赖任何 props 或 state，必须传入 []。否则 React 认为它依赖所有变量，会在每次渲染后重新执行——这正是模型“不断重载”的直接原因。

? 额外警告：避免在 useEffect 中直接操作 DOM 进行滚动动画

你当前通过 fridge.style.transform 手动更新样式的方式存在两大隐患：

Ainative React Sdk

使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。

下载

性能灾难：scroll 事件每秒触发数十次，同步修改 style.transform 会强制重排重绘，卡顿明显；
与 React 渲染冲突：React 控制

✅ 推荐替代方案（高性能 & 声明式）：

使用 useScroll()（来自 @react-three/drei）获取滚动进度，并驱动 3D 场景内对象位移（真正 GPU 加速）；
或用 IntersectionObserver + CSS will-change: transform + requestAnimationFrame 优化 DOM 动画。

示例（轻量级修复版）：

// 在 Home 组件内，替换原 useEffect
const scroll = useScroll(); // ✅ 声明式获取滚动进度 [0, 1]

// 在 Canvas 内，让 Model 响应滚动（无需操作 DOM）
function AnimatedModel() {
  const meshRef = useRef();
  useFrame(() => {
    if (meshRef.current) {
      meshRef.current.position.x = -scroll.visible * 200; // 滚动越深，模型左移越多
    }
  });
  return (
    <model ref="{meshRef}"></model>
  );
}

✅ 最佳实践总结

问题点	错误写法	正确做法
useEffect 执行时机	无依赖数组 → 每次渲染执行	添加 [] → 仅挂载/卸载时执行
模型加载稳定性	useGLTF 在渲染函数内调用	提前 useGLTF.preload() + 组件内复用缓存
滚动动画性能	同步 style.transform in scroll handler	使用 useScroll / requestAnimationFrame / CSS transform + will-change
3D 与 DOM 协同	强耦合 DOM 位移与 Canvas 容器	将动画逻辑下沉至 Three.js 层（useFrame），保持渲染一致性