how does vans have a small-sized json 3d model

user_12543735 0
Viewed 100

I am trying to create a 3d site using Threejs and React and react-three-fiber where I can customize shirts and then stumbled upon vans website in their customization page. I noticed that they are not using gltf but instead just use json and it's quite small for the quality of the 3d it shows. I was wondering how they achieved such file size for such quality. Because compared to mine I have a gltf that amounts to more or less 5mb but when I converted it to json using the .toJSON in threejs it became 100mb.

I looked into the request and this is the size: enter image description here

this is the json data that it responds: enter image description here

and this is the 3d representation: enter image description here

Currently I am using gltf to load the 3d but I am trying to replicate vans' way and just request a json data from the server but the json data the I can achieve is just to big. How did they do it?

Apparently only the geometry matters to me. If anyone has any idea about what they did on this.. I am more than thankful. Thank you.

gltf react-three-fiber three.js reactjs json
1 Answers

This model has one or more textures, and I think it's almost certain that textures account for most of the size difference you are seeing when converting from glTF to three.js custom JSON format. Writing textures into a Data URI (for JSON serialization) in a browser can sometimes create a very unoptimized version of an image.

My suggestion would be to stick with the glTF file — a more efficient format, and three.js itself recommends it — and use glTF optimization tools to bring the size down further or compress the texture.

user_13147620
Related