SuperAPI AI 工具集

graphics-troubleshooting

前端与建站

查看项目

更新于 10-15 16:49

技能介绍

用途:用于调试和修复 Three.js、React Three Fiber(R3F)及 3D 资产管线中的常见问题,按“你看到的现象”组织内容,便于按症状快速诊断。

主要能力与覆盖范围:涵盖黑屏/空屏、物体渲染但效果异常、性能问题、加载失败、物理问题(@react-three/rapier)以及着色器/材质错误。每类问题给出症状、可能原因与修复思路,例如相机位置、光照、材质、缩放、Z-fighting、法线、DPR、色调映射与色彩空间等检查点。

使用方式:先按症状查对应表格,逐项排查;文中提供最小可渲染场景示例(R3F 与原生 Three.js)作为起点,并给出性能信息读取方式,如 renderer.info.render.calls、triangles、memory.geometries、memory.textures。加载方面给出 GLTFLoader 配合 DRACOLoader、MeshoptDecoder、KTX2Loader 的配置模式,需设置 decoderPath 与 transcoderPath。参考资料文件 references/visual-bugs.md、references/performance.md、references/loading.md 提供更细的排查内容。

适用场景:Three.js 或 R3F 项目出现视觉缺陷、性能下降、资源加载报错、物理模拟异常或着色器编译失败时使用。

限制与注意事项:文中标注的库版本为 Three.js r171+、React Three Fiber v9.5+、@react-three/drei v9.116+、@react-three/rapier v2+,其他版本行为可能不同;示例中的路径与 CDN 地址需按项目实际调整;具体性能指标阈值、修复步骤以实际项目与官方文档为准,资料未提供的内容暂未提供。