GLTF/GLB 在线预览器(含材质/动画检查 + 一键导出 HTML)
面向产品/设计/开发联调的通用 3D 预览入口,支持拖拽加载与快速诊断。
提示词 (Prompts):
你是资深前端工程师。请用中文输出一个“可直接运行/可部署”的在线 3D 模型预览器项目,要求:
1) 技术栈:Vite + Type + Three.js(WebGL 渲染)。
2) 支持文件:.gltf/.glb(包含贴图、骨骼、动画)。支持拖拽文件到页面;若模型引用外部贴图/二进制资源,提供“批量选择资源文件”的补全流程。
3) 功能:
- 视图:轨道控制、灯光切换、网格/坐标轴开关、相机视角重置、背景颜色切换。
- 检查:统计三角面数、顶点数、材质数量、贴图列表;列出动画剪辑并可播放/暂停/切换。
- 诊断:贴图缺失提示、尺寸/包围盒显示、加载错误面板。
4) 交付物(必须一次性给全):
- 文件树
- 每个文件的完整源码(至少包含 index.html、src/main.ts、src/ui.ts、src/checks.ts、vite.config.ts、package.json)
- 本地运行命令
- 生产构建与部署说明(静态站点,支持 Nginx 或任意对象存储)
5) “一键输出 HTML”硬要求:工具内置一个按钮“导出为单文件 HTML”,点击后生成一个可离线打开的 HTML 文件(内嵌必要 CSS/JS),并在该 HTML 中复现当前模型的基础预览(允许只支持 glb 内嵌资源的离线预览)。
6) 测试/QA:给出至少 8 条可执行的 QA checklist(覆盖拖拽、错误文件、动画、贴图缺失、导出 HTML、离线打开、性能与内存等)。
7) 输出格式:先输出项目说明,再输出文件树,然后逐个文件贴出完整代码,不要省略。不要输出与图片生成有关的内容。
主要用途: 用于在线快速预览 GLTF/GLB,检查材质与动画是否正常,定位缺失资源并导出可离线打开的 HTML 交付给协作方。
STL 在线结构检查器(法线/孔洞提示 + 一键导出 HTML 报告)
面向 3D 打印与工程评审的 STL 快速体检工具,重点在“发现问题并给出可复核的报告”。
提示词 (Prompts):
你是 WebGL 与几何处理工程师。请用中文输出一个在线 STL 检查工具的完整项目代码,要求:
1) 技术栈:React + Vite + Type + Three.js;可使用轻量几何库(如 three-mesh-bvh)但必须写清安装与用途。
2) 输入:支持拖拽 .stl(ASCII/二进制),显示模型。
3) 检查项:
- 三角面/顶点统计、包围盒尺寸(mm 单位可切换)、体积与表面积估算。
- 法线方向一致性提示、重复面/退化三角形检测、非流形边(non-manifold)标记(可用颜色高亮)。
- 简单“孔洞/开口边界”提示(不需要自动修复,但要能列出数量与大致位置)。
4) 交付物:文件树 + 全量源码 + 运行命令 + 部署说明。
5) “一键输出 HTML”硬要求:提供“导出 HTML 报告”按钮,生成一个包含检查结果与截图(canvas 转 64)并可离线打开的单文件 HTML。
6) QA:至少 10 条 checklist(包含极大模型、损坏文件、导出报告、截图、不同浏览器兼容、性能阈值)。
7) 输出:只输出可运行的代码与说明,不要输出图片生成类提示词。
主要用途: 给 STL 模型做在线体检,输出可离线留档的 HTML 报告,便于评审/交付/复核。
OBJ/MTL 资源一致性校验器(贴图缺失/路径异常 + 一键导出 HTML)
解决 OBJ/MTL 在传递过程中“文件齐但路径不对”的常见问题,适合外包/协作交付检查。
提示词 (Prompts):
你是前端工程师。请用中文输出一个在线 OBJ/MTL 资源校验与预览工具项目,要求:
1) 技术栈:Vite + Type + Three.js(使用 OBJLoader、MTLLoader)。
2) 输入:支持一次选择多个文件(.obj/.mtl/.jpg/.png 等),并在页面内建立“虚拟文件系统”映射,自动解析 MTL 引用的贴图路径。
3) 功能:
- 列出:几何文件、材质文件、贴图文件清单;标记缺失项与重复项。
- 检查:路径大小写不一致、相对路径层级异常、包含空格/中文/特殊字符的兼容提示。
- 预览:可渲染模型;支持切换材质预览模式(原始/仅法线/线框)。
4) 输出物:文件树 + 源码 + 命令 + 部署。
5) “一键输出 HTML”硬要求:提供“导出离线预览 HTML”按钮,生成一个单文件 HTML(内嵌 Three.js 代码与资源索引清单)。允许用户在导出前选择“只导出检查报告(不内嵌贴图)”或“尝试内嵌贴图为 dataURL”。
6) QA:至少 8 条,覆盖:缺 mtl、缺贴图、路径包含空格、大小写不一致、批量选择、导出 HTML 与离线打开。
7) 输出必须全中文说明与注释(变量名可英文),不要写任何生成图片的提示词。
主要用途: 在线校验 OBJ/MTL/贴图是否齐全且路径正确,并一键导出可离线打开的 HTML 预览或报告,减少协作返工。
3D 模型尺寸与单位检查台(尺度异常提示 + 一键导出 HTML 报告)
用于快速判断模型是否“单位不对/尺度离谱”,并把结论固化为可复核的报告。
提示词 (Prompts):
你是前端 + 三维内容管线工程师。请用中文输出一个在线“模型尺寸/单位检查”工具的完整项目,要求:
1) 支持 GLB/GLTF/OBJ/STL 四种输入(可做成多 tab;每个格式给出加载实现)。
2) 自动计算包围盒长宽高、对角线长度、中心点;支持单位切换(mm/cm/m),并提供“可能的单位推断”(基于阈值:例如超过 100m 判为异常)。
3) 视图:显示尺寸标注(用线段与文本标签),支持一键对齐到地面、居中与重置。
4) 报告:生成一份结构化检查结果(JSON)并在页面展示。
5) “一键输出 HTML”硬要求:提供“导出 HTML 检查报告”按钮,生成单文件 HTML(包含当前模型的基本预览截图 + 检查表格 + JSON 原文),离线可打开。
6) 交付物:文件树 + 源码 + 命令 + 部署。
7) QA:至少 10 条(含:不同格式、超大/超小尺度、单位切换、截图、导出报告、异常提示、移动端基本可用)。
8) 输出全中文说明,不要涉及图片生成。
主要用途: 在线做模型尺度与单位合理性检查,生成可离线留档的 HTML 报告用于评审、交付或问题追踪。
拓扑与网格质量检查器(非流形/自交提示 + 一键导出 HTML)
用于更偏工程的网格质量巡检,把“哪里可能有问题”说清楚。
提示词 (Prompts):
你是几何算法工程师。请用中文给出一个在线网格质量检查工具的完整前端项目代码,要求:
1) 输入:GLB/GLTF(优先)或 STL(二选一也可,但必须讲清取舍)。
2) 检查:
- 非流形边/顶点数量与定位;
- 退化三角形(面积接近 0)检测;
- 长细比异常三角形(aspect ratio)统计;
- 自交/穿插的近似检测(可用 BVH 近似,给出提示级别即可)。
3) 可视化:将问题面片高亮(颜色分级),并提供问题列表(点击定位到视角)。
4) “一键输出 HTML”硬要求:导出单文件 HTML 报告(包含统计、阈值、问题列表、截图与导出时间戳)。
5) 交付物:文件树、全量源码、运行命令、部署说明。
6) QA:至少 8 条(阈值调整、问题列表跳转、导出报告、不同浏览器、性能)。
7) 输出必须是可直接运行的代码,不要省略。
主要用途: 对模型做网格质量巡检与可视化定位,并导出可离线打开的 HTML 报告用于审查与返工沟通。
动画剪辑与骨骼信息浏览器(剪辑列表/时长/事件点 + 一键导出 HTML)
适合在不打开 DCC 软件的情况下,快速核对动画资源是否齐全、命名是否规范。
提示词 (Prompts):
你是 Three.js 工程师。请用中文输出一个 GLB/GLTF 动画资源浏览器的完整项目,要求:
1) 技术栈:Vite + Type + Three.js。
2) 输入:拖拽 GLB/GLTF。
3) 功能:
- 列出动画剪辑名称、时长、帧率估计;支持播放/暂停/倍速/循环。
- 列出骨骼层级(树形),可搜索。
- 可选:提供“事件点标注”(用户在时间轴上加标记并导出 JSON)。
4) “一键输出 HTML”硬要求:导出一个单文件 HTML(离线可打开)用于演示当前选择的动画剪辑(允许仅演示一个剪辑),并附带一份检查摘要(剪辑列表、骨骼数量、文件大小)。
5) 交付物:文件树 + 全量源码 + 命令 + 部署。
6) QA:至少 8 条(含:无动画文件提示、多剪辑切换、导出 HTML、离线播放、性能)。
7) 输出全中文说明,不要涉及图片生成。
主要用途: 在线核对 GLB/GLTF 动画与骨骼信息,快速做资源验收,并导出离线 HTML 演示/检查摘要。
批量模型体检台(多文件拖拽 + 统一报告 + 一键导出 HTML)
用于团队交付验收:一次拖进多个模型,统一跑一套检查规则并出报告。
提示词 (Prompts):
你是全栈工程师。请用中文输出一个“批量 3D 模型体检台”的完整项目(前端为主即可),要求:
1) 输入:支持一次拖拽多个文件(GLB/GLTF/STL/OBJ),对每个文件独立解析并输出结果。
2) 检查规则(至少包含):文件大小阈值、三角面数阈值、包围盒尺寸异常、贴图缺失(对 gltf/glb/obj)、是否包含动画(对 gltf/glb)。
3) 页面:表格列表(每行一个模型),可排序/筛选;点击行进入详情预览。
4) 统一报告:生成一个汇总 JSON(含每个文件的检查结果与建议),并支持下载。
5) “一键输出 HTML”硬要求:提供“导出单文件 HTML 总报告”按钮,生成离线可打开的 HTML(内含汇总表格、每个模型的关键指标、问题统计图表可用纯前端实现)。
6) 交付物:文件树 + 代码 + 命令 + 部署。
7) QA:至少 12 条(含:多文件、混合格式、错误文件不中断、导出报告、性能、内存释放)。
8) 输出全中文说明,不要涉及任何图片生成指令。
主要用途: 批量验收与巡检 3D 资源,统一输出可离线打开的 HTML 报告,便于项目对账与返工沟通。
3D 预览问题复现包生成器(最小复现 + 一键导出 HTML)
把“某个模型在某些设备/浏览器不显示”这类问题,压缩成一个可分享的最小复现包。
提示词 (Prompts):
你是资深前端工程师。请用中文输出一个“3D 预览问题最小复现包生成器”的完整在线工具项目,要求:
1) 输入:用户上传一个 GLB/GLTF(优先)或 STL。
2) 工具自动生成一个“最小复现页面”:只包含必要渲染代码、错误捕获、设备信息采集(UA、WebGL 版本、扩展列表)、以及模型加载与渲染。
3) 页面提供“复现参数”:背景色、是否开启抗锯齿、是否开启 sRGB、是否开启阴影(默认关闭)等。
4) “一键输出 HTML”硬要求:点击“导出复现 HTML”,生成一个单文件 HTML(可离线打开),其中嵌入当前模型(允许限制仅支持 GLB 内嵌资源),并自动展示设备信息与错误日志面板。
5) 交付物:文件树 + 全量源码 + 命令 + 部署。
6) QA:至少 10 条(含:导出文件大小、离线打开、错误捕获、不同浏览器、移动端、内存释放)。
7) 输出全中文说明,不要出现图片生成类内容。
主要用途: 生成可分享的离线 HTML 复现页,帮助快速定位 3D 预览兼容性问题与渲染失败原因。