vans怎么有小尺寸的json 3d模型

Posted 2023-02-27

【中文标题】vans怎么有小尺寸的json 3d模型

【英文标题】：how does vans have a small-sized json 3d model

【发布时间】：2021-06-21 18:35:17

【问题描述】：

我正在尝试使用 Threejs 和 React 以及 react-three-fiber 创建一个 3d 网站，我可以在其中定制衬衫，然后在他们的定制页面中偶然发现了 vans 网站。我注意到他们没有使用 gltf 而是只使用 json 并且它显示的 3d 质量非常小。我想知道他们是如何实现这样质量的文件大小的。因为与我的相比，我有一个或多或少 5mb 的 gltf，但是当我使用 threejs 中的 .toJSON 将它转换为 json 时，它变成了 100mb。

我查看了请求，这是大小：

这是它响应的 json 数据：

这是 3d 表示：

目前我正在使用 gltf 加载 3d，但我正在尝试复制 vans 的方式，只是从服务器请求一个 json 数据，但我可以实现的 json 数据太大了。 他们是怎么做到的？

显然只有几何对我来说很重要。 如果有人知道他们在这方面做了什么……我非常感谢。谢谢。

【参考方案1】：

这个模型有一个或多个纹理，我认为几乎可以肯定纹理是您在从 glTF 转换为 three.js 自定义 JSON 格式时看到的大部分大小差异。在浏览器中将纹理写入数据 URI（用于 JSON 序列化）有时会创建非常未优化的图像版本。

我的建议是坚持使用 glTF 文件（一种更有效的格式和three.js itself recommends it），并使用glTF optimization tools 进一步缩小尺寸或压缩纹理。

【讨论】：

感谢您回答我的问题，非常感谢。嗯，只是一个额外的问题。有没有办法将几何图形与纹理或材料分开。就像只在导出中包含几何图形。因为显然我的应用程序中只需要几何图形。再次感谢

这应该是可能的，是的——例如scene.children[0].geometry.toJSON() 是一种选择。或者您可以在 Blender 中打开 glTF 模型并分离材质和纹理，然后再次导出。

实际上，我在从搅拌机导出时使用的是用 draco 压缩的 .glb 文件。除几何部分外，我已取消选中导出时的所有其他选项。检查了 UV 法线、顶点颜色并将材质设置为导出..我得到的结果大小约为 11mb，这是相当不错的，但如果有任何其他方式我仍然可以在请求期间减小其文件大小，比如货车中的文件大小......我正在使用搅拌机 2.92..谢谢您的帮助。我真的很感激。

还有其他可用的工具（请参阅上面的链接），但对话时间可能比 cmets 允许的要长。如果您可以在 three.js 论坛上分享模型，您可能会获得更具体的建议。 :)

太好了。太感谢了。您一定会很快在 three.js 论坛上收到我的消息。感谢您的支持 :)