如何把 3D CAD 模型放到您的网站上：4 种方法对比

要把 3D CAD 模型放到网站上，先把装配体导出为 STEP 文件，再转换成 glTF 或 GLB 格式的轻量化展示模型，然后在产品页上用网页查看器展示这个模型。CAD 文件本身完全不必公开：浏览器只下载展示模型。以 Tutamen 由 42 个零件组成的 ICM-21 冷却液歧管为例，根据其 STEP 文件制作的展示模型下载大小为 2.0 MB。

STEP 是所有主流 CAD 系统都能导出的中性 3D 文件格式（ISO 10303）。glTF 是 Khronos Group 推出的网页 3D 开放格式，GLB 则是单文件形式的 glTF。从前者到后者的四种方法，主要区别在于：买家能做什么、您要交出什么，以及由谁来维护。

为什么网站不能直接显示 STEP 文件？

STEP 文件用精确的数学曲面描述产品，而浏览器只能绘制平面三角形。每个面都得先铺满小三角形（也就是人们常说的“网格”中的多边形），这一步叫作曲面三角化。三角形越多，曲线越平滑，文件也越大，所以好的转换工具会在曲线全屏显示已足够平滑时就停止细分。

转换方式也决定了页面能做什么。好的展示模型会让每个零件保持独立、有名称、有材质，这样装配体才能拆成爆炸图，每个零件都能点击。重复的零件只存储一次：ICM-21 的文件包含 214,168 个三角形，屏幕上绘制的是 654,948 个。展示模型不带特征树、草图或参数，所以质量、体积等数据要先从精确的 CAD 中测得；好的页面还会注明，两者不一致时以规格书为准。

这套流程为 Proofscene 的四个在线模型生成的结果，均根据各页面实际加载的文件测得：

“下载大小”是访客实际要等待加载的部分；周围的页面和查看器另外约增加半 MB。*STRAVIK、HALVORN 和 ARTIXO 是 Proofscene 为展示其他行业而自行建模的虚构品牌；ICM-21 是 Tutamen 的真实产品，根据其 STEP 文件构建而成。

把 CAD 模型放到网站上，有哪四种方法？

四种方法分别是：嵌入免费在线查看器；使用托管式 3D 平台或配置器；基于 Google 的 model-viewer 等开放网页组件自行搭建页面；以及根据 CAD 为您定制搭建的交互式产品页。针对工业产品最关键的几个问题，四者对比如下：

哪种方案适合您的产品？

免费查看器适合给某一位客户快速看一个零件。这是最快的方式，交出去的东西也最多，因为免费 CAD 查看器直接使用您的 STEP 文件本身。

托管式平台适合靠外观和选项销售的产品，买家要挑颜色或尺寸。这类买家会在配置器里完成挑选。

基于 model-viewer 自行搭建（model-viewer 是 Google 基于 three.js 库开发的免费网页组件），适合有时间的网站团队，以及只需旋转查看的简单零件。它能很好地处理旋转、标注和 AR。代价是每个产品都要转换、简化、打光和测试，每次改动都要再来一遍；剖切、X 光透视模式或可点击的零件列表，都得自己写代码。

定制搭建的交互式产品页适合价值藏在外壳里面的工业产品（泵、阀门、歧管、机器人关节），以及会逐项核对数据的买家。Proofscene 通过一个框架标签将产品页嵌入您自己的网站，或将页面托管在 yourbrand.proofscene.com；Tutamen 的 ICM-21 在 STEP 文件送达当天就上线了。

如果您的产品属于最后这一类，发来 STEP 文件和规格书，就能把您的产品做成 3D。Proofscene Business 和 Enterprise 套餐包含定制搭建的产品页；开工之前，我们的团队会告诉您要做什么、何时上线。

买家应该能用模型做什么？

工业产品的买家想看到内部、核对数据，所以模型不仅要能旋转，还要能让他们拆开产品、剖开查看、透视内部，并读取每个零件的数据。以下每项功能都在在线模型中运行，现在就能打开体验：

• 爆炸图。HALVORN BV25 球阀按装配顺序拆分为 14 个零件。
• 剖视与流动。把 STRAVIK SX 50-160 泵一剖为二，并将运行流量设为 15 到 40 m³/h 之间的任意值。
• X 光透视。透过 ARTIXO RA90 机器人关节的外壳，看到电机、50:1 谐波减速器和输出轴承。
• 零件数据与测量。点击 Tutamen ICM-21 的任意零件，查看名称、材料和数量；在真实边线之间测量；并让冷却液按规格书的比例分流。
• 分享。每个视图都有链接和二维码；还有简短的导览，方便不想自己动手探索的访客。

同一个模型还能渲染出新品发布宣传片：查看 3D 产品动画，或观看这部 35 秒的短片，看看交互式 3D 产品页中的产品如何在浏览器中拆开展示。

如何让 3D 模型在手机上快速加载？

把模型控制在几 MB 以内，等访客滚动到它时再加载，并确保没有模型时页面也能正常阅读。如果模型抢先加载，就会拖慢买家真正想看的文字和图片。

• 压缩文件。glTF 可以用更少的字节存储数值，并通过 Draco 或 meshopt 扩展压缩几何数据；服务器也应以压缩形式发送。Proofscene 的模型用 16 位数值存储表面朝向，并以 gzip 压缩传输：ICM-21 的 3.6 MB GLB 文件，到达浏览器时为 2.0 MB。
• 把三角形用在买家会看的地方。螺纹细节、细小的圆角，以及没人会打开的零件内部，只会让手机多花时间，却毫无增益。
• 先显示静态图。等 3D 滚动到可视区域或用户点击时再加载；model-viewer 通过封面图（poster）和延迟加载实现这一点。
• 不要劫持页面滚动。Proofscene 的嵌入内容随页面滚动，只有按住 Ctrl 或双指捏合时才会缩放；在手机上，面板会收成底部抽屉，产品始终可见。
• 把关键信息写在文字里。搜索引擎和 AI 助手读取的是页面，而不是模型，所以要把产品描述、零件名称和规格参数写进 HTML。Proofscene 的公开演示页面还为 3D 模型添加了结构化数据；即使浏览器无法运行 3D，也照样能拿到这些文字。

模型放到公开页面后，您的 CAD 安全吗？

安全，因为展示模型不是您的 CAD：它只包含达到屏幕精度的三角形，没有特征树、草图、参数或精确曲面，也不含您省略掉的任何内部细节。发布之前，保护好关键内容：

• 简化或去除任何涉及商业机密的部分，例如内部流道或密封截面。
• 绝不要把 STEP 文件上传到访客能下载原始文件的查看器。
• 上线前通过设有密码保护的链接审阅，并与经手 CAD 的各方签署保密协议（NDA）。Proofscene 正是这样做的，您的 CAD 和内容，所有权始终归您。

延伸阅读

阅读 Tutamen 的 ICM-21 如何从 STEP 文件变成在线产品页，在交互式 3D 产品演示页面体验全部四个模型，或观看这部 36 秒的短片，看看 3D 产品查看器如何放到您的网站上。