1. ホーム
  2. javascript

[解決済み] NodeでJSONLoaderを使用する場合、XMLHttpRequestが定義されていない

2022-02-18 17:01:56

質問

Three.jsでゲームを書いているのですが、マルチプレイヤーゲームとして、チートを防ぐためにサーバーサイドでクライアントの位置を確認する必要があります。現在、サーバーでモデルを読み込もうとしているのですが、このような場合、どうすればいいのでしょうか?

var THREE = require("three");
var loader = new THREE.JSONLoader();
loader.load( './models/tree.json', function ( geometry, materials ) {
    var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
    res.send(mesh);
});

しかし、サーバーは死んでしまい、次のように吐き出されます。

var request = new XMLHttpRequest();
ReferenceError: XMLHttpRequest is not defined
    at FileLoader.load

このリクエストは node_modules\three\build\three.js:29258 というように XMLHttpRequest が作られる。

なぜこのようなことが起こるのでしょうか?私が何か間違ったことをしているのか、それともThree.jsのこの部分がNodeのために壊れているのでしょうか?

解決方法を教えてください。

Three.jsでは XMLHttpRequest を使用して、JSONファイルなどのファイルを読み込むことができます。 XMLHttpRequest はブラウザ環境ではビルトインされていますが、Node環境ではビルトインされていないため、定義されておらず、このようなエラーになります。をインストールする必要があります。 xmlhttprequest パッケージを NPM を通して Node で使用します。

Three.jsでは xmlhttprequest モジュールで、グローバル変数を設定する必要があります。 new XMLHttpRequest が動作します。

global.XMLHttpRequest = require("xmlhttprequest");