Three.jsでユーザーの3dファイルデータを読み込みたい

Question

ご覧いただきありがとうございます。

Three.jsでユーザーの3dファイルを読み込みたいと考えております。

現在している実装としましては、

１．<input>タグを用いて３Dモデルファイルをユーザーに指定してもらいます。

<input type="file" value="ファイルを選択" multiple id="file-input" name="image">

２．読み込んだファイルからURLを生成しています。
(この時、サーバーにはデータを送らないようにしています)
そして、そのURLをThree.jsから読み込むことで、Sceneに３Dモデルデータをインポートしています。

document.getElementById( 'file-input' ).onchange = function () {

　　if( this.files !== undefined && this.files !== null ) {

        let files = this.files;

        for(let i = 0; i < files.length; ++i){
            let file = files[i];

            let file_name = file.name;
            let file_extension = file_name.split('.').pop();
            if( file_extension === 'gltf' || file_extension === 'glb' ) 
            {
                let objectUrl = URL.createObjectURL( file ) ;
                load_gltf_model( objectUrl, scene );
            }

        }
        
　　}
}

function load_gltf_model( url, scene ){
    // Load GLTF or GLB
    const loader = new THREE.GLTFLoader();
    loader.load(
        url,
        // onLoader
        function ( gltf ){
            const model = gltf.scene;
            scene.add(model);
        },
        // onError
        function ( error ) {
            console.log( 'An error happened' );
            console.log( error );
        }
    );
}

これによって、サーバーにファイルを送らずとも、３Dモデルファイルを読み込んでいます。
３Dモデルデータが「.glb」のように１つのファイルにまとまっていればうまくいくのですが、「.gltf + texture1.png + texture2.png ...」のように複数ファイルの場合はうまくいきません。
この理由が、生成されたURLが、

blob:http://localhost/9c10bf59-1f61-430c-bfd8-775d54f83bef
blob:http://localhost/47bd0f41-cea7-410a-a4f7-67af973d8b07
blob:http://localhost/676bd075-1f1f-4879-8c64-3f5ebce59200
blob:http://localhost/be7288ab-584a-4608-a6dd-10524fedc1e5
blob:http://localhost/60ff0ab4-14f2-4db3-9762-2d86b9e3b111
blob:http://localhost/59c537a7-7e69-4d44-9e8b-ff30320d6893
。
。
。

のようにファイル名と生成されるURLに対応付けがなく、モデルロード時にテクスチャを見つけられずにエラーが出てしまいます。（blob:http://localhost/0001_img0.pngのような感じだとうまくいくと思われる。）
しかし、仕様上、URL.createObjectURLで生成されるURL名は変更できないようで、解決方法が見つけられておりません。

現在は、Three.jsのローダープログラムそのものを変更してしまうか、複数ファイルの場合に限って、ファイルをサーバーに挙げることを考えておりますが、スマートな解決方法に見えず悩んでおります。

ユーザーの３Dモデルデータを読み込む実装として、このほかにありそうでしたら、ぜひご教授いただきたいです。

よろしくお願いいたします。

Answer 1

楽なのはモデルデータにまとまっていればモデルデータのみ、textureが分かれているなら別のformを用意してアップロードしてもらい、それぞれモデルローダー, textureLoaderで読み込む方法かと思います。
どうしても１つのフォームにアップロードさせたいという話であればすみません。

Comments

[gochuumonha]

ご回答ありがとうございます。
そうですね、今回は1つでやりたいと考えております。

Answer 2

的を外していたらごめんなさい。

複数のpngをinput fileでアップロードする場合、multiple にされてますが、name属性に[]を付ければ大丈夫ではないか、と思いました。。

<input type="file" value="ファイルを選択" multiple id="file-input" name="image[]">

Comments

[gochuumonha]

つけ忘れておりました。
ご回答ありがとうございます。

Answer 3

サンプルにやりたかった挙動に近いものを見つけました。
こちらを見ながら試してみようと思います。

https://github.com/mrdoob/three.js/tree/master/editor