本文详解为何在滚动时 3D 模型频繁重载，并通过修复 useEffect 依赖数组、优化 DOM 操作与 Canvas 渲染逻辑，实现流畅稳定的滚动动画。
本文详解为何在滚动时 3d 模型频繁重载，并通过修复 `useeffect` 依赖数组、优化 dom 操作与 canvas 渲染逻辑，实现流畅稳定的滚动动画。
在使用 @react-three/fiber 和 @react-three/drei 构建基于滚动触发的 3D 交互场景（如本例中的“智能冰箱”）时，一个常见却隐蔽的问题是：模型看似“刷新”或“闪烁”，实则是整个 。这并非模型本身重加载，而是因 React 组件意外重渲染导致
根本原因在于原始代码中两个关键 useEffect 缺失依赖数组：
// ❌ 错误：无依赖数组 → 每次 render 都执行，导致无限注册/移除事件监听器
useEffect(() => {
const handleScroll = () => setScrollY(window.scrollY);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
});
// ❌ 同样错误：每次渲染都添加新 scroll 监听器，且内部 for 循环逻辑严重低效
useEffect(() => {
const fridge = document.getElementById("fridge");
window.addEventListener("scroll", () => {
for (let i = 0; i <p>这不仅引发内存泄漏和事件监听器堆积，更会导致 scrollY 状态更新后组件高频重渲染，进而使 <canvas> 所在的 JSX 树被反复挂载/卸载。</canvas></p><p>✅ 正确做法如下：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4798" title="React Flow Architecture"><img
src="https://img.php.cn/upload/skill/000/000/081/179022439798739.jpg" alt="React Flow Architecture" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4798" title="React Flow Architecture" class="overflowclass">React Flow Architecture</a>
<p class="overflowclass">提供使用 React Flow 构建基于节点的 UI 的架构指导，适用于设计基于流程的应用程序，在状态管理、交互和性能等方面进行决策。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4798" title="React Flow Architecture" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><h3>1. 为所有 useEffect 显式声明依赖数组</h3><pre class="brush:php;toolbar:false;">// ✅ 添加空数组 [] —— 仅在组件挂载/卸载时执行一次
useEffect(() => {
const handleScroll = () => setScrollY(window.scrollY);
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []); // ← 关键：空依赖数组
useEffect(() => {
const fridge = document.getElementById("fridge");
if (!fridge) return;
const handleScroll = () => {
// ✅ 直接映射 scrollY 到 transform，避免循环
fridge.style.transform = `translateX(${-(scrollY * 0.5)}px)`; // 可调速率
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, [scrollY]); // ← 依赖 scrollY，但仅当其变化时更新? 提示：[scrollY] 是安全的，因为 scrollY 由 useState 管理，且我们只在它变更后同步 DOM；而 [] 确保事件监听器生命周期严格绑定组件。
2. 避免在滚动回调中直接操作 DOM（推荐方案）
更优解是完全脱离原生 DOM 操作，改用 React Three Fiber 的声明式能力：
- 将 #fridge 容器改为受控的 ref + useFrame
- 用 useFrame 在渲染帧内平滑更新位置（利用 Three.js 渲染循环，不卡主线程）
function FridgeContainer({ scrollY }) {
const groupRef = useRef<three.group>(null);
useFrame((state) => {
if (groupRef.current) {
// 平滑跟随滚动：X 偏移量 = -scrollY * 系数
groupRef.current.position.x = -scrollY * 0.02;
// 可叠加 y/z 微调，增强视差效果
groupRef.current.position.y = Math.sin(scrollY * 0.005) * 2;
}
});
return (
<group ref="{groupRef}"><model></model></group>
);
}
// 在 Home 中替换 Canvas 内容：
<canvas><suspense fallback="{null}"><stage><fridgecontainer scrolly="{scrollY}"></fridgecontainer><orbitcontrols enablezoom="{false}"></orbitcontrols></stage></suspense></canvas></three.group>
此方式将滚动逻辑交由 Three.js 渲染线程处理，彻底规避 DOM 重排、样式强制同步及 Canvas 重建问题，性能与稳定性显著提升。
3. 其他关键优化建议
- 预加载模型：已正确使用 useGLTF.preload("modern_fridge.glb")，确保首次渲染前资源就绪；
- 禁用不必要的重渲染：Model 组件应保持纯净，避免在 scene.traverse 中做副作用操作（可移至 useMemo 或 useEffect 中一次性初始化）；
- CSS 层级隔离：确保 #fridge 容器未被父元素 overflow: hidden 截断，或设置 will-change: transform 提升合成层。
✅ 总结：模型“重载”本质是 React 组件失控重渲染 → Canvas 卸载重建 → GLTF 重新解析。修复核心在于：
① 所有 useEffect 必须显式声明依赖数组（[] 或 [dep]）；
② 避免在滚动事件中暴力操作 DOM，优先采用 useFrame 声明式驱动；
③ 坚持单一数据源（scrollY 状态）驱动所有动画，保证同步性与可预测性。
遵循以上原则，即可实现丝滑、零闪烁的滚动驱动 3D 交互体验。
