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

Question

我无法在 HTML 输入中加载用户 select 文件，因为我猜加载程序需要 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]);

});

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

Three.js Load local FBX File without uploading

html

javascript

three.js