Loading a local glTF file into Javascript memory

Question

I am using three.js and Capacitor to create a native iOS and Android app. I have some GLTF models that I want to load from some sort of asset folder that is bundled up with the code and delivered to a user, but I am not sure how to go about this.

This documentation on the GLTF Loader's load function, requires some sort of url. Parse, however, takes in a "glTF asset to parse, as an ArrayBuffer". How can I load this glTF file into memory and what is the best practice for doing so? I tried import * as Model from './models/myModel.gltf' but got a Cannot find module error.

Answer 1

Here my method to load a gltf file, I'm using reader to load any file in my scene, then it's parsing with loader.parse. But if you want sample models folder I think you don't need reader method and parser. Just using load GLTF basic method and store your samples in an array or object. I hope I helped you.

loadGltf(file, filename) {
        reader.onload = readerEvent => {
            const contents = readerEvent.target.result;
            const loader = new THREE.GLTFLoader()
            try {
                loader.parse(contents, '', function (gltf) {
                    gltf.scene.traverse(function(child) {
                        if (child.isMesh) {
                            child.castShadow = true;
                            child.receiveShadow = true;
                        }
                    });
                    currentModel = gltf.scene;
                    scene.add(gltf.scene);
                });
            }
            catch(error) {
                alert("Your file " + Load.filename + " was not parsed correctly." + "\n\n" + "ERROR MESSAGE : " + error.message);
            }
        }
        reader.readAsArrayBuffer(file);
    }