微信内置浏览器不支持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、一次没压缩的纹理，就彻底静默失败——这些地方没有报错，只有白屏和用户划走。
