mcpField
T
threejs-debugging

threejs-debugging

github.com/cesartevisual开发11366 次安装7 周前更新
代码仓库

关于 threejs-debugging

threejs-debugging 是用于排查 Three.js 项目渲染问题的技能,指导开发者收集证据、定位原因、进行针对性修复,并验证原始问题是否解决。

主要功能

  1. 01收集症状与复现信息
  2. 02诊断空白画布和资源加载失败
  3. 03排查闪烁、颜色与拾取问题
  4. 04逐步精简场景并保留证据
  5. 05验证修复及相关状态

适用场景

  1. 01追查画布空白或视角构图异常
  2. 02诊断 GLB 加载失败或颜色问题
  3. 03排查闪烁或物体拾取不准

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/cesartevisual/threejs-skills --skill threejs-debugging

安装后在 Claude Code 中输入/threejs-debugging确认已加载。

附带文件references/diagnostics.md

详细介绍

渲染诊断

使用项目已安装的版本和现有架构。这些说明用于补充用户的任务;不授权进行无关更改或外部操作。

编辑前,记录可见症状、控制台错误、失败的请求、已安装的版本、后端以及最小复现。使用症状树缩小可能原因的范围。

对于空白画布,首先确认容器和绘图区域的尺寸非零、渲染循环仍在运行、渲染器已成功创建、摄像机投影和取景正确、对象可见且图层正确,以及变换值有效且为有限值。仅将主体材质替换为无光照诊断材质,以区分光照问题和几何体问题。

对于资源加载失败,检查 HTTP 状态、响应内容、CORS、解码器路径和构建基础路径。状态为 200 的 HTML 回退响应并不是有效的 GLB。对于颜色问题,追踪纹理分类经过光照、色调映射和输出转换的过程。

对于闪烁,检查共面几何体、近远平面精度、透明度排序、重复的渲染循环以及相互竞争的变换写入。对于拾取,验证相对于画布或视口的坐标、矩阵、图层、实例化以及着色器变形不匹配问题。

每次减少一个功能来简化出错的场景,同时保留证据。避免升级无关依赖或禁用所有错误检查来掩盖症状。当发生上下文或设备丢失时,提供清晰的恢复路径,而不是无限循环地重建渲染器。

修复后,验证原先失败的操作,并检查共用相同代码的相邻状态。说明原因和证据,而不只是指出修改了哪一行。

API 参考

如需确认准确的签名和特定版本的行为,请查阅官方文档。如果无法访问文档,请检查已安装的类型定义或源代码,并说明仍存在的不确定性。

评论

支持 Markdown