Three.js + 高德地图 WebGL 上下文丢失排查：Context Lost/Restored 完整解决方案
Three.js WebGL 上下文恢复是 3D 地图开发中的高频痛点。当使用 Three.js 在高德地图（AMap）上叠加 3D 模型、热力图或自定义图层时，控制台频繁出现THREE.WebGLRenderer: Context Lost/Restored警告，常导致模型闪烁、材质丢失甚至页面卡死。本文将提供一套经多端验证的完整排查方案，帮助你彻底解决 WebGL 上下文管理问题。
为什么 WebGL 上下文会丢失？先理解底层机制
理解问题根源是有效修复的前提。WebGL 上下文丢失本质是浏览器对 GPU 资源的管理策略：
| 触发场景 | 底层原因 | 典型症状 |
|---|---|---|
| 多上下文竞争 | 浏览器限制单页面最多 16 个 WebGL 上下文 | 高德地图 + Three.js 各自创建上下文，触发资源回收 |
| 移动端省电策略 | 系统主动释放后台页面的 GPU 资源 | 页面切后台/锁屏后恢复时模型消失 |
| GPU 内存不足 | 纹理/几何体过大超出显存限制 | 低端设备频繁丢失上下文，性能骤降 |
| 驱动/浏览器兼容 | WebGL 驱动崩溃或浏览器实现缺陷 | 特定设备/系统版本必现，难以复现 |
关键结论：80% 的上下文丢失源于多上下文竞争与资源管理不当，优先优化这两项可快速见效。
核心方案：六步彻底解决上下文丢失问题
步骤 1：监听上下文事件并实现资源重建
// 初始化 WebGLRenderer 时绑定事件constrenderer=newTHREE.WebGLRenderer({canvas:yourCanvas,antialias:true,preserveDrawingBuffer:true// 关键：保留缓冲区内容});// 监听上下文丢失（阻止默认行为避免完全黑屏）renderer.domElement.addEventListener('webglcontextlost',(event)=>{event.preventDefault();// 阻止浏览器默认清理console.warn(' WebGL Context Lost - 准备恢复资源');},false);// 监听上下文恢复（核心：重建所有 WebGL 资源）renderer.domElement.addEventListener('webglcontextrestored',()=>{console.log(' WebGL Context Restored - 重建资源中...');// 1. 重置渲染器状态renderer.resetGLState();// 2. 标记材质/纹理需要更新scene.traverse((obj)=>{if(obj.material){obj.material.needsUpdate=true;// 若使用自定义 shader，需重新编译if(obj.material.onContextRestore){obj.material.onContextRestore();}}if(obj.geometry){obj.geometry.attributes.position.needsUpdate=true;}});// 3. 重新加载纹理（若使用外部图片）textureLoader.load('model.jpg',(texture)=>{texture.needsUpdate=true;});},false);最佳实践：将资源重建逻辑封装为
onContextRestore回调，便于不同材质统一管理。
步骤 2：复用高德地图的 WebGL 上下文（关键！）
避免 Three.js 与高德地图各自创建上下文，通过AMap.CustomLayer共享同一 WebGL 上下文：
constcustomLayer=newAMap.CustomLayer({zIndex:120,// 确保叠加层在地图之上init:(gl,layers)=>{// 核心：复用高德提供的 gl 上下文constrenderer=newTHREE.WebGLRenderer({context:gl,// 共享上下文，避免竞争premultipliedAlpha:false,