Three.js Load local FBX File without uploading-CodePudding

I cannot load files users select in a HTML input because the loader expects a URL linux style URL I guess. I have tried feeding it a blob as a URL object, feeding the raw data to the FBX loader, and most recently feeding the mozilla path to it on my system, but nothing works. How can this be achieved without physically uploading the file to the site and passing an actual URL?

This is my latest attempt:

    $(document).ready(function() {
        
        $('#file').change(function () {
                
            if ( this.value == '' ) {
                console.log( "No valid file selected." );
            }

            var filePath = this.files[0].mozFullPath,
                loader = new THREE.FBXLoader();
                    
            loader.load( filePath, function( object ) {

                object.traverse( function( c ) {

                    if ( c instanceof THREE.Camera ) {              

                        // Debug log
                        console.log( c );

                    }

                } );

            });
            
        });
        
    });

CodePudding user response：

Try a combination of a file input HTML element and the FileReader API. Something like:

const fileInput = document.querySelector("#file-input");

fileInput.addEventListener("change", function(event) {

  const reader = new FileReader();

  reader.addEventListener("load", function(event) {

    const contents = event.target.result;

    const loader = new FBXLoader();
    const object = loader.parse(contents);
    scene.add(object);
    
  });

  reader.readAsArrayBuffer(this.files[0]);

});