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

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

ただいまの
回答率

88.34%

Three.jsを使用してJSON形式の3Dモデルの表示ができない。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 5,369

okutann0529

score 10

前提・実現したいこと

IE11環境で、visualstudioを使用して3Dモデルの表示をしようとしています。
Three.jsはr76を使用しており、3Dデータは、brenderからJSON形式でエクスポートしたものを使用しています。
3Dモデルの読み込みには、JSONLoaderを使用しています。

発生している問題・エラーメッセージ

3Dモデルが表示されません。
visualsutadioのデバッグ機能を使用して確認すると、
JSONLoaderのload関数で登録するコールバック関数の第2引数[下記コードのmaterials]がundifindで返されている。

該当のソースコード

var loader = new THREE.JSONLoader();
loader.load('model.js', function (geo,materials) {

        model = new THREE.Mesh(geo, materials);

        model.position.set(0, 0, 0);
        model.scale.set(10, 10, 10);

        scene.add(model);
    }
);

試したこと

課題に対してアプローチしたことを記載してください
Three.jsのリビジョンを変更してみたりと試しましたが、
うまくいきません。
JSONLoaderのload関数で登録するコールバック関数の第1引数[上記コードのgeo]は中身の参照ができたので、うまく動いているようにに思います。
同じページ内で読み込みせずに作るモデルの表示はできているので、バグの原因は、上記コード内と見当をつけました。

補足情報(言語/FW/ツール等のバージョンなど)

仕様ブラウザ:IE11
開発環境:visual studio Community2013
使用ライブラリ:Three.js[r76]
使用3Dデータ:brenderからJSON形式でエクスポートしたもの

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

r76はまだノータッチだったので、ちょっと古いバージョン(r73)の情報になってしまうかもですが…

model = new THREE.Mesh(geo, materials);の行でmaterialsにundifindが返っているんですよね?

new THREE.Meshする前にmaterialだけ先にnew THREE.MeshFaceMaterialし、
その変数をmodelの第二引数に代入しなければならなかったのではないでしょうか?

loader.load('model.js', function (geo,materials) {
        var mat = new THREE.MeshFaceMaterial(materials);
        model = new THREE.Mesh(geo, mat);

        //省略

}


一度お試しを…

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/04 12:16

    ご指摘いただいた部分を修正したらば、表示がされるようになりました。
    大変お世話になえいました。ありがとうございます。

    表示毎に読み込んだモデルの全体の色が変わってしまうのですが
    model = new THREE.Mesh(geo,new THREE.MeshLambertMaterial({ color: 0xff0000 }));
    とすることで単色を指定することもできました。

    >モデルの作成やマテリアル、テクスチャなどについては
    http://nvtrlab.jp/column/2-1
    >などをご覧になって色々試してみると良いかもしれません。
    情報ありがとうございます。
    勉強させていただきます。m(_ _)m

    キャンセル

  • 2016/05/04 15:08 編集

    とんでもないです。
    ちょっと回り道してしまいましたが、無事解決したようで何よりです。
    久しぶりにthree.jsに触る機会にもなったので、こちらとしてもいい機会でした。
    ありがとうございます。

    > 表示毎に読み込んだモデルの全体の色が変わってしまう
    データの作成の仕方によって色がちゃんと書き出したデータに反映されていないケースや
    ライトの強さ、色によっても色味は変化します。

    データの作成についてはBlender関係の記事や書籍を参考にされると良いと思います。(このあたりについて自分はまだ趣味の域を出ないので、お教えできるレベルではないので…。)

    ライトの強さや色に関して(光を受けるモデルの反射率や質感などにもよりますが)もBlenderの中で質感とライトの種類、位置、数等を色々変えながら見比べていくとイメージしやすいと思います。

    THREE.Mesh()を使って色を再定義する、という方法も無しではないですが
    基本として、json等で読み込むモデルは
    ・多数の頂点を持つ
    ・複数のパーツ構成
    ・パーツ毎に色、質感などが違う
    ・ボーンを持つ
    など、通常のthree.jsの機能の中で作成するには非常に難しい複雑なモデル(Ex. 建物モデルや人物モデルなど)を使いたい際に使用するものです。
    なので、上記の方法はあまり使わないかな…と個人的には思います。

    今回はたまたま「試しに」だったのだと思いますが
    基本図形をsceneに追加したいのであれば、デフォルトで用意されている
    ジオメトリプリセットを利用するほうが、簡単かつ色々できます。

    wikiなどもご覧になってみると良いかもしれません。
    http://www56.atwiki.jp/threejs/pages/1.html

    また、最初のほうでお話ししていたような方法は
    ●Blenderとthree.jsを使って行うモーフィングアニメーション
    http://www.knockknock.jp/archives/562

    あたりで確認されてみると良いかなと思います。


    解決されたようであれば、質問を「解決済み」にしておいてください。

    キャンセル

  • 2016/05/04 21:47

    最後にフォローまでしていただきありがとうございました。
    面ごとに別の色を振ったモデルを読み込むところから勉強をしてみたいと思います。

    キャンセル

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

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

関連した質問

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