javascript - Three.js 不上传加载本地FBX文件

Question

我无法加载用户在 HTML 输入中选择的文件，因为我猜加载器需要一个 URL linux 样式的 URL。我已经尝试将一个 blob 作为 URL 对象提供给它，将原始数据提供给 FBX 加载器，最近在我的系统上提供给它的 mozilla 路径，但没有任何效果。如果不将文件实际上传到站点并传递实际 URL，如何实现这一点？

这是我最近的尝试:

    $(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 );

                    }

                } );

            });
            
        });
        
    });

Answer 1

尝试结合使用文件输入 HTML 元素和 FileReader API。像这样的东西:

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]);

});