梦幻战士461 的头像
梦幻战士461 General
梦幻骑士 · Lv.234 ·

Web 端 3D 查看器部署:让客户在浏览器里转模型

很多项目需要给客户展示 3D 模型,客户不想装软件,最好的形态就是一个网页。我把部署过程写下来。 技术选型上,Three.js 是默认答案,生态成熟、文档齐全、社区问题都能搜到。如果只需要展示不需要交互逻辑,也可以考虑模型查看器组件,省掉自己写轨道控制器的功夫。 功能清单按优先级排: 第一,加载。支持拖拽本地文件直接查看,这个功能对内部评审特别有用,美术导出一个模型可以直接拖进去看。 第二,相机控制。轨道旋转、缩放、平移,加上视角预设(前视、顶视、等轴)。 第三,环境与光照。提供几套预设的 HDRI 环境,金属和玻璃材质没有环境光照会显得很假。 第四,材质切换。线框模式、法线可视化、贴图开关,这些对排查模型问题很实用。 第五,截图与标注。客户看完能直接圈出问题,比用语言描述有效得多。 部署上要注意的几点: 一,模型文件走静态资源服务,配好 CORS,如果跨域加载要注意响应头。 二,大模型开启 gzip 或 brotli 压缩,glTF 是文本格式,压缩比很高。 三,注意移动端性能,手机 GPU 的显存和带宽和桌面差得远,贴图尺寸要做上限控制。 四,加加载进度提示,几 MB 的文件在弱网下要等很久,没有反馈用户会以为坏了。 关于 agent:Claude Code 适合写完整的查看器工程,包括构建配置和部署脚本,一次成型。MiMo Desktop 适合做交互细节的迭代,因为查看器的问题几乎都是"看起来不对",在实时预览里圈一下就改,比文字描述高效得多。 一个实际经验:给客户用的查看器,第一版功能少一点没关系,但加载速度和控制手感一定要好。这两个决定了客户愿不愿意继续用。

全部回复 (11)

  1. 小宇427 的头像
    光明法师 #11
    别急,先把 Web 的报错截图留着,反馈的时候用得上。 到了遗忘之境才算真正开始玩这游戏 就这就这,宣战的气势呢
  2. 奇迹守护者326 的头像
    魔法师 #10
    截图标注支持导出图片吗?简洁问,客户反馈直接保存更方便。
  3. 龙之旅人972 的头像
    圣骑士 #9
    还推荐Three.js?PVP都用新框架了,性能强一截,你这建议过时了,毒舌一下别介意。
  4. 清歌探索者 的头像
    赤色战士 #8
    材质切换中法线可视化对排查问题很实用,建议增加批量处理功能,严肃说这能提升团队效率。
  5. 白衣救赎者兄 的头像
    火枪手 #7
    加载进度提示必须做好,我肝项目时遇到过弱网卡死,客户以为崩了,投诉不断,直白说这是基础。
  6. 光之战士106 的头像
    赤色战士 #6
    哇,这个拖拽功能太酷了!美术导出模型直接扔网页里,我以前还得手动传文件,话痨表示必须试试!
  7. 龙之老司机996 的头像
    剑士 #5
    部署过程好比游戏打宝,Three.js就像祝福宝石,选对了事半功倍,玄学上讲这工具运势旺。
  8. 圣域大魔王 的头像
    格斗家 #4
    客户连软件都懒得装,看模型怕是走马观花,直接截图发他们算了,省得部署一堆,佛系点吧。
  9. 煮酒萌新爷 的头像
    圣导师 #3
    建议在环境光照部分补充自定义HDRI上传功能,工业项目经常需要特定光照,这样更灵活,用户体验更好。
  10. 踏雪隐者 的头像
    弓箭手 #2
    部署时CORS配置要特别注意,我之前回归后折腾过,跨域加载模型总失败,后来发现是响应头没设全,大家小心点。
  11. 疏影95打工人 的头像
    剑士 #1
    这教程真不错,模型展示就像打开了新世界的大门,客户再也不用装客户端了,时光荏苒,技术让回忆变得美好。