微信内置浏览器不支持WebGL需检测环境并降级：iOS微信禁用WebGL，应检测MicroMessenger+iPhone OS，fallback至Canvas渲染；CDN域名须在公众号业务域名白名单配置；模型需Draco压缩、纹理2的幂次、关闭阴影等优化；安卓需加touch-action: none并阻止默认事件。

微信内置浏览器不支持WebGL怎么办

微信 iOS 和 Android 内置 WebView 对 WebGL 支持不完整，尤其 iOS 微信（基于 UIWebView 或旧版 WKWebView）默认禁用或限制 WebGL 上下文创建，导致 Three.js、Babylon.js 等建模库直接报错 WebGL not supported 或白屏。

实操上必须做两件事：检测环境 + 降级兜底：

• 用 navigator.userAgent 检测是否为微信（含 MicroMessenger）且是 iOS（含 iPhone OS）
• 若命中，优先尝试启用 webgl2，失败则 fallback 到 canvas 渲染器（如 Three.js 的 CanvasRenderer，或改用纯 CSS 3D/图片序列模拟）
• 避免依赖 WebGLRenderingContext 构造函数直接 new，改用 canvas.getContext('webgl') || canvas.getContext('webgl2') 并判空

模型资源加载失败：CDN 域名未配置业务域名白名单

微信内嵌浏览器强制校验所有网络请求的域名——哪怕模型文件（.glb、.gltf、.bin）放在 CDN 上，也必须提前在「微信公众平台 → 公众号设置 → 功能设置 → 业务域名」中添加该 CDN 域名，否则 fetch 或 XMLHttpRequest 直接被拦截，控制台显示 net::ERR_BLOCKED_BY_CLIENT。

注意点：

立即学习“前端免费学习笔记（深入）”；

• 只支持 https 协议，且必须带 www 或非 www 形式之一，不能写通配符 *.cdn.com
• 子路径（如 https://cdn.example.com/models/）无需额外配置，但域名本身必须完全匹配
• 本地开发用 localhost 或 127.0.0.1 永远无效，真机调试务必部署到已备案的 HTTPS 域名

Three.js 模型在微信里黑屏或卡死

不是代码写错了，大概率是渲染管线触发了微信 WebView 的内存保护机制。iOS 微信对单帧 GPU 负载敏感，模型面数过高、纹理过大、未压缩、自动播放动画都会引发强制降帧甚至进程终止。

关键优化动作：

• 模型导出前必须用 gltf-pipeline 或 Blender glTF exporter 启用 draco 压缩（.glb 文件体积可压至 1/5），并确保纹理尺寸为 2 的幂（512x512、1024x1024）
• Three.js 初始化时显式关闭非必要功能：renderer.shadowMap.enabled = false、renderer.physicallyCorrectLights = false、model.traverse(m => m.castShadow = m.receiveShadow = false)
• 禁止自动播放动画：把 mixer.update() 改为手动触发（如点击后才启动），或用 requestAnimationFrame 限帧（if (clock.getDelta() > 0.03) mixer.update(0.03)）

安卓微信点击模型无反应：touch 事件被微信劫持

安卓版微信（尤其 8.0+）会拦截 touchstart、touchmove 事件用于自身手势识别，导致 OrbitControls 或自定义拖拽失效，表现为“点不动、转不了、缩放失灵”。

解决方式很直接：

• 给 canvas 元素加样式：touch-action: none（必须加在 canvas 上，父容器无效）
• 监听 touchstart 时立即调用 event.preventDefault()，阻止微信默认行为（注意：仅在需要交互时才 prevent，否则影响页面滚动）
• Three.js 中推荐用 PointerEvent 替代 TouchEvent（需开启 renderer.domElement.style.touchAction = 'none' 并确保 Three.js 版本 ≥ r122）

微信内嵌 HTML5 建模最麻烦的从来不是画不出来，而是它随时可能因为一个没声明的域名、一行没加的 touch-action、一次没压缩的纹理，就彻底静默失败——这些地方没有报错，只有白屏和用户划走。