关于 threejs-debugging
threejs-debugging 是用于排查 Three.js 项目渲染问题的技能,指导开发者收集证据、定位原因、进行针对性修复,并验证原始问题是否解决。
主要功能
- 01收集症状与复现信息
- 02诊断空白画布和资源加载失败
- 03排查闪烁、颜色与拾取问题
- 04逐步精简场景并保留证据
- 05验证修复及相关状态
适用场景
- 01追查画布空白或视角构图异常
- 02诊断 GLB 加载失败或颜色问题
- 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 参考
如需确认准确的签名和特定版本的行为,请查阅官方文档。如果无法访问文档,请检查已安装的类型定义或源代码,并说明仍存在的不确定性。