1

node.js サーバーで three.js を使用して、プレイヤーの位置と衝突を制御する必要があります (ビデオ ゲームを作成しようとしています)。

nodejsでthreeを使用するには、「npm install three」でインストールしましたが、動作します。

しかし、JSONLoader を呼び出したいときは、できません。

私は私のクラスです、私は追加します：

var THREE =require('three'); //or require('three/three.js');
var JSON=require('three/src/loaders/JSONLoader.js');

また

require('three'); //or require('three/three.js');
var JSON=require('three/src/loaders/JSONLoader.js');

同じです。「THREE が定義されていません」というエラーが表示されますが、その理由がわかりません。

このエラーを解決するために、JSON コードを three.js ファイルに入れましたが、json をロードするときに別の問題が見つかりました。

var loader = new THREE.JSONLoader();
loader.load(__dirname + '/public/js/essai/test.dae',function ( collada ){
...
});
Error : XMLHttpRequest is not defined.

私は正しく使用していないと思いますが、どこに問題があるのか​​ わかりません。

助けてくれませんか？

どうもありがとうございました。

4

3 に答える 3

1

2行目は必要ありません。つまり

var JSON = require('three/src/loaders/JSONLoader.js');

three.js適切にロードすると、たとえば

var THREE = require('three/three.js')

はJSONLoader既に存在するので、THREE.JSONLoader問題なく動作するはずです。

ところで、このエラーが発生する理由は、コードがグローバルスコープ内のオブジェクトのJSONLoader.js存在に依存しているためです。ただし、オブジェクトがローカルTHREEであるため、そこにはありません。THREE

于 2013-10-18T19:05:00.640 に答える
0

あなたの助けに感謝します。

私は自分のコードを置き換えました。実際、それはよりうまく機能します。JSONLoader.js を変数に入れている理由がわかりません。

ただし、2 つ目の問題があります。このコードは、node.js のソケットへの受信時に実行されます。

Room.prototype.create = function(data, socket, emit)
    {
    var loader = new THREE.JSONLoader();
    loader.load(__dirname + '/public/js/essai/test.js',function ( collada ){
                        console.log(collada);
                    }); 
}

しかし、私のエラーは次のとおりです。

ReferenceError: XMLHttpRequest is not defined
    at THREE.JSONLoader.loadAjaxJSON (C:\wamp\www\SiteThreeOnNode\kart\node_modu
les\three\three.js:9974:16)
    at THREE.JSONLoader.load (C:\wamp\www\SiteThreeOnNode\kart\node_modules\thre
e\three.js:9968:7)
    at C:\wamp\www\SiteThreeOnNode\kart\routes\room.js:37:12

検索後、URL json を次のように置き換えようとしましたhttp://localhost:2999/js/essai/test.js: https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally そして、この URL で json にアクセスできます。

しかし、XMLHttpRequest は定義されていないため、何も変更されません。これは、ソケット関数でこれを実行しようとしたためだと思いますが、よくわかりません。

于 2013-10-19T10:50:27.633 に答える
0

最後に 1 つ質問があります。ノード サーバーで .json ファイルを読み込み、衝突を検出するためにシーンに配置します。

ノード：

 var loader = new THREE.JSONLoader();
    fs.readFile(__dirname+'/public/js/essai/lobby.js', 'utf8', function (err, data) {
                  if (err) {
                    console.log('Error: ' + err);
                    return;
                  }

                  data = JSON.parse(data);
                  var model = loader.parse( data );
                  var mesh = new THREE.Mesh( model.geometry, new THREE.MeshBasicMaterial() );
                  mesh.scale.set(40,40,40);
                  scene.add( mesh );
                  collisable.push( mesh );
    });

衝突を検出するには:

var collisions, i,
            // Maximum distance from the origin before we consider collision
            distance = 32,
            // Get the obstacles array from our world
            obstacles = GameEngine.getInstance().collidableMeshList;//basicScene.world.getObstacles();
        // For each ray
        for (i = 0; i < this.rays.length; i += 1) {
            // We reset the raycaster to this direction
            this.caster.set(this.design.position, this.rays[i]);
            // Test if we intersect with any obstacle mesh
            collisions = this.caster.intersectObjects(obstacles);
            // And disable that direction if we do
            if (collisions.length > 0 && collisions[0].distance <= distance) {
                // Yep, this.rays[i] gives us : 0 => up, 1 => up-left, 2 => left, ...
                if ((i === 0 || i === 1 || i === 7) && this.direction.z === 1) {
                   console.log("collisions"); //
                } else if ((i === 3 || i === 4 || i === 5) && this.direction.z === -1) {
                   console.log("collisions");
                }
                if ((i === 1 || i === 2 || i === 3) && this.direction.x === 1) {
                    console.log("collisions");
                } else if ((i === 5 || i === 6 || i === 7) && this.direction.x === -1) {
                    console.log("collisions");
                }
            }
        }

クライアントでコリジョンを試してみると正常に動作しますが、サーバーではコリジョンを検出しません。そのため、ロードが正しく行われているかどうかを確認するために、クライアントに json ファイルをロードしようとしました。

クライアントでこのようにロードすると、シーンは問題ありません。

loader.load( "essai/lobby.js", function( geometry ) {
     mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
      mesh.scale.set( 40, 40, 40 );
      scene.add(mesh);
      animate();
});

そして、クライアントでこのようにロードすると、うまくいきません:

$.getJSON("essai/lobby.js", function(data) {
      var model = loader.parse( data );
      var mesh = new THREE.Mesh( model.geometry, new THREE.MeshBasicMaterial() );
      mesh.scale.set(40,40,40);
      scene.add(mesh);
      animate();
      });

エラーはありませんが、何も表示されません。

したがって、サーバー側でも同じだと思います。なぜ衝突が検出されないのですか。

サーバー側では、 animate() は必要ないと思うので使用しません。そして、私の車を置き換える計算は大丈夫です。

したがって、ローダーがメッシュを正しくロードしていないか、クライアントのように衝突を検出できない可能性があると思います。どう思いますか？

どうも。

クライアントで衝突を検出するには、次を使用します。

this.rays = [
                new THREE.Vector3(0, 0, 1), //up
                new THREE.Vector3(1, 0, 1), //up left
                new THREE.Vector3(1, 0, 0), //left
                new THREE.Vector3(1, 0, -1), // down left
                new THREE.Vector3(0, 0, -1), //down
                new THREE.Vector3(-1, 0, -1), // down right
                new THREE.Vector3(-1, 0, 0), //rigth
                new THREE.Vector3(-1, 0, 1) //up right
        ];
        this.caster = new THREE.Raycaster();
        this.direction = new THREE.Vector3(0, 0, 0);

起きたら、方向を設定します： this.direction.set(0,0,1); ダウンしたら、方向を設定します： this.direction.set(0,0,-1); ...

于 2013-10-20T11:57:38.070 に答える