React Three Fiber 应用中，因 useEffect 缺少依赖数组导致组件频繁重渲染，进而触发 GLTF 模型反复卸载与重载，造成视觉“刷新”闪烁；正确添加空依赖数组可确保副作用仅执行一次。
react three fiber 应用中，因 `useeffect` 缺少依赖数组导致组件频繁重渲染，进而触发 gltf 模型反复卸载与重载，造成视觉“刷新”闪烁；正确添加空依赖数组可确保副作用仅执行一次。
在使用 @react-three/fiber 和 @react-three/drei 构建 3D 交互页面时，一个常见却容易被忽视的问题是：滚动过程中 3D 模型不断“重绘”或“闪退”——表面看是 Canvas 刷新，实则是模型组件被反复卸载与重建。从你提供的代码和视频可见，<Model /> 被嵌套在随滚动动态调整 transform 的 <div id="fridge"> 内，而问题根源并不在 CSS 动画，而在于 React 的渲染机制与 useEffect 的误用。
? 根本原因：useEffect 缺失依赖数组引发无限重执行
你的两处 useEffect 均未传入第二个参数（依赖数组）：
useEffect(() => { /* ... */ }); // ❌ 无依赖数组 → 每次渲染都执行
useEffect(() => { /* ... */ }); // ❌ 同样触发高频重绑定 scroll 事件这会导致：
- 每次状态更新（如 scrollY 变化）都重新执行 useEffect；
- window.addEventListener('scroll', ...) 被重复注册，事件监听器堆积；
- 更关键的是：<Model /> 组件在每次父组件重渲染时被完全卸载并重建，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 手动更新样式的方式存在两大隐患：
- 性能灾难：scroll 事件每秒触发数十次，同步修改 style.transform 会强制重排重绘，卡顿明显；
- 与 React 渲染冲突：React 控制 <Canvas> 的生命周期，而你绕过 React 直接操纵其父容器 DOM，易引发不可预测行为。
✅ 推荐替代方案（高性能 & 声明式）：
- 使用 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} />
);
}✅ 最佳实践总结
| 问题点 | 错误写法 | 正确做法 |
|---|---|---|
| useEffect 执行时机 | 无依赖数组 → 每次渲染执行 | 添加 [] → 仅挂载/卸载时执行 |
| 模型加载稳定性 | useGLTF 在渲染函数内调用 | 提前 useGLTF.preload() + 组件内复用缓存 |
| 滚动动画性能 | 同步 style.transform in scroll handler | 使用 useScroll / requestAnimationFrame / CSS transform + will-change |
| 3D 与 DOM 协同 | 强耦合 DOM 位移与 Canvas 容器 | 将动画逻辑下沉至 Three.js 层（useFrame），保持渲染一致性 |
最后，请始终启用 useGLTF.preload("model.glb")（你已在底部调用 ✅），确保模型在首次渲染前完成预加载，彻底规避运行时加载抖动。
通过以上修正，你的冰箱模型将稳定驻留在 Canvas 中，滚动时仅平滑位移，不再闪烁重载——真正实现高性能、可维护的 3D 交互动效。
