使用 html 將 gltf 文件加載到 three.js 場景中<input>

Question

我一直在嘗試通過從 HTML 輸入標簽上傳 gltf object 到three.js場景。

我需要從客戶端計算機 select 一個特定文件，然后在網站上顯示它，ZIP 然后將其發送到多媒體管理服務器（cloudinary）

我的代碼（我刪除了相機設置以進行問題分類）：

const gltfUploader = document.getElementById('gltf-uploader');
const imageUploadbar = document.getElementById('img-upload-bar');

gltfUploader.addEventListener('change', async (e) => {

    let file = e.target.files[0];

    console.log(typeof file);

    var loader = new THREE.GLTFLoader();
    loader.load(file, 
        function(gltf){
          scene.add(gltf.scene);
          renderer.render(scene, camera);
  });

這是 html：

<input type="file" id="img-uploader">
<progress id="img-upload-bar" value="0" max="100" style="width: 100%"></progress>

Answer 1

您必須首先使用 FileReader 將文件作為文本讀取。 而不是使用從 url 加載 gltf 的loader.parse() loader.load()而是使用從數據（JSON 格式的字符串/文本）加載 gltf 的 loader.parse() 。

根據文檔https://threejs.org/docs/#examples/en/loaders/GLTFLoader你必須給loader.parse() arguments 數據、路徑、onLoad 和 onError。 我不確定您是否可以省略 path 參數，所以我將其包含在內。 它說數據應該是一個ArrayBuffer，但在源代碼中它顯示你可以放入一個字符串..

https://developer.mozilla.org/en-US/docs/Web/API/File

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

gltfUploader.addEventListener( 'change', async (e) => {

    let file = e.target.files[ 0 ];
    let reader = new FileReader();

    // This is code that runs after reader.readAsText() finishes
    reader.onload = function ( gltfText ) {

        var loader = new THREE.GLTFLoader();

        loader.parse( gltfText, '', function( gltf ){

          scene.add( gltf.scene );
          renderer.render( scene, camera );

        }, function( errormsg ){
            console.error( errormsg );
        });    

    });

    reader.readAsText( file );

Answer 2

在文檔中，他們說要解析的 glTF 資產為 ArrayBuffer 或 JSON 字符串，但請嘗試使用 ArrayBuffer，我希望它可以工作。

適用於 glb 和 gltf 模型的代碼

document.querySelector("#inputSelector").onchange = e =>  {
    let file = e.target.files[ 0 ];
    let reader = new FileReader();
    reader.readAsArrayBuffer( file );
    reader.onload = gltfText => {
        let loader = new GLTFLoader();
        loader.parse( gltfText.target.result, '', () => {
            scene.add(gltf.scene)
        }, 
        errMassage => { console.error(errMassage) } )
    }
}