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

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

ただいまの
回答率

90.12%

Three.jsのOBJLoaderをローカルPCで実行する方法

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,066

zero1962

score 6

前提・実現したいこと

Three.js をつかって3DモデルをローカルPCで表示したいのです。

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

Webサーバにアップした場合、正常に表示できますが、
ローカルPCで実行した場合、なにも表示できません。

エラーメッセージ
とくにありません。

該当のソースコード

var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) { };
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var mtlLoader = new THREE.MTLLoader();

mtlLoader.load( "mmd/ki61.mtl", function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.load( "mmd/ki61.obj", function ( object ) {
object.scale.set( 0.1, 0.1, 0.1 );
object.position.set( 0, 0.45, 3 );
object.rotation.set( 0.2, 0, 0 );
mesh = object;
meshShadow = new THREE.ShadowMesh( mesh );
scene.add( mesh );
scene.add( meshShadow );
Qbuff  = mesh.quaternion;
}, onProgress, onError );
});

試したこと

Three.jsのサンプルプログラムでどこまでローカルで実行できるか試したところ、GUIメニューと、各種Loaderを利用している場合、ローカルPCで実行できないようです。

MTLLoader.js/OBJLoader.jsでwebサーバに依存する部分を探しましたが
わかりませんでした。
Loaderもほかの機能同様にローカルPCで実行できると開発試験が容易になるので、ぜひお教え願います。

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

Three.jp r77

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

+1

WebGLやThree.jsの問題ではなく、たんにXHRのセキュリティの問題な気がします。
個人的な利用の範囲でローカル環境のファイルを表示したい、ということであれば
Chromeなどでは設定をすることで閲覧が可能になります。

こちらのリンクが参考になるかと思います。
【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/11/07 19:05

    IE11を使っていてchromeを使っていませんでした。
    紹介されたリンクを参考にchromeで試してみます。
    迅速なご回答ありがとうございました。

    キャンセル

  • 2016/11/07 21:32

    chrome をインストールし、"--disable-web-security"オプションを有効にして確認しましたが、
    OBJLoad/MTLLoad できませんでした。
    ちなみに下記の部分を有効にしOBJLoad/MTLLoad以外の3Dオブジェクト表示させたところ
    問題なくローカルPCで表示できました。

    var onProgress = function ( xhr ) {
    if ( xhr.lengthComputable ) {
    var percentComplete = xhr.loaded / xhr.total * 100;
    console.log( Math.round(percentComplete, 2) + '% downloaded' );
    }
    };
    var onError = function ( xhr ) { };
    THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
    var mtlLoader = new THREE.MTLLoader();

    このことから、以下の実行ができていないと思われます。
    mtlLoader.load( "mmd/ki61.mtl", function( materials ) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.load( "mmd/ki61.obj", function ( object ) {
    object.scale.set( 0.1, 0.1, 0.1 );
    object.position.set( 0, 0.45, 3 );
    object.rotation.set( 0.2, 0, 0 );
    mesh = object;
    meshShadow = new THREE.ShadowMesh( mesh );
    scene.add( mesh );
    scene.add( meshShadow );
    Qbuff = mesh.quaternion;
    }, onProgress, onError );
    });


    onProgress, onError がXHRのセキュリティの問題に引っかかっているのでしょうか?

    キャンセル

  • 2016/11/07 21:40

    ちなみにWebサーバで表示でOBJLoad/MTLLoadできている例が以下となります。
    http://zero1962.world.coocan.jp/vrml/ThreeSim/ThreeSim.html
    こちらが、ローカルPCも表示可能な例です。
    http://zero1962.world.coocan.jp/vrml/ThreeSim/ThreeSim_Local.html
    これに、上記のOBJLoad/MTLLoadを有効にしchromeでセキュリティオプション有効にしましたがうまく表示できませんでした。

    キャンセル

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

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