本文详解为何在滚动时 3D 模型频繁重载，并通过修复 useEffect 依赖数组、优化 DOM 操作与 Canvas 渲染逻辑，实现流畅稳定的滚动动画。
本文详解为何在滚动时 3d 模型频繁重载，并通过修复 `useeffect` 依赖数组、优化 dom 操作与 canvas 渲染逻辑，实现流畅稳定的滚动动画。
在使用 @react-three/fiber 和 @react-three/drei 构建基于滚动触发的 3D 交互场景（如本例中的“智能冰箱”）时，一个常见却隐蔽的问题是：模型看似“刷新”或“闪烁”，实则是整个 <Canvas> 被反复卸载并重建。这并非模型本身重加载，而是因 React 组件意外重渲染导致 <Canvas> 及其子树被销毁重建——从而触发 useGLTF 重新解析 GLB 文件、重初始化 WebGL 上下文，造成视觉上的“重载”抖动。
根本原因在于原始代码中两个关键 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 < scrollY; i++) {
fridge.style.transform = `translateX(${-i}px)`; // ⚠️ 每帧执行数百次，阻塞主线程
}
});
});这不仅引发内存泄漏和事件监听器堆积，更会导致 scrollY 状态更新后组件高频重渲染，进而使 <Canvas> 所在的 JSX 树被反复挂载/卸载。
✅ 正确做法如下：
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
1. 为所有 useEffect 显式声明依赖数组
// ✅ 添加空数组 [] —— 仅在组件挂载/卸载时执行一次
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 />
</group>
);
}
// 在 Home 中替换 Canvas 内容：
<Canvas>
<Suspense fallback={null}>
<Stage>
<FridgeContainer scrollY={scrollY} />
<OrbitControls enableZoom={false} />
</Stage>
</Suspense>
</Canvas>此方式将滚动逻辑交由 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 交互体验。
