Large size Model in react native and react three fiber

Questions
1

Hello there,

Im using three js and react three fiber for an app. The 3D Model which i use, is really large (about 14mb). So the problem, everytime when the app restart/reload it takes to much time to load the app, because the 3D Model is always loading new.

Does anybody know if there is a solution for this? Cache,… or whatever?

Thank you for your Help.

2
  • resize textures of model
  • remove extra vertices,faces,edges (decimate from blender)
  • export model with separated texture with minal visible size and model without textures

As a last resort, use zip compression at the maximum level and unzip it on the client.

import * as EXTRA from 'https://didisoftwares.ddns.net/2/zip.js';

        function unzip(zip) {
            zip.filter(function (path, file) {
                var manager = new THREE.LoadingManager();
                manager.setURLModifier(function (url) {
                    var file = zip.files[url];
                    if (file) {
                        var blob = new Blob([file.asArrayBuffer()], { type: 'application/octet-stream' });
                        return URL.createObjectURL(blob);
                    }
                    return url;
                });
                var extension = file.name.split('.').pop().toLowerCase();
                switch (extension) {
                    case 'glb':
                        new THREE.GLTFLoader().parse(file.asArrayBuffer(), '', function (result) {
                           //TODO with result as model loaded
                        });
                        break;
                }
            });
        }

//edited
JSZipUtils.getBinaryContent('model.zip', async function (err, data) {
                if (err) {
                    throw err; // or handle err            
                }
                var myzip = new JSZip();
                unzip(myzip.load(data));
            });