json - vans怎么有小号的json 3d模型

Question

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

我查看了请求，这是尺寸:

这是它响应的 json 数据:

这是 3d 表示:

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

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

Answer 1

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

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