質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.60%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,555

score 73

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

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

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

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

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

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

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

これによって、サーバーにファイルを送らずとも、3Dモデルファイルを読み込んでいます。
3Dモデルデータが「.glb」のように1つのファイルにまとまっていればうまくいくのですが、「.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のローダープログラムそのものを変更してしまうか、複数ファイルの場合に限って、ファイルをサーバーに挙げることを考えておりますが、スマートな解決方法に見えず悩んでおります。

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/21 23:51

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/21 23:52

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

    キャンセル

check解決した方法

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る