1

我需要在我的 node.js 服务器上使用 three.js 来控制玩家的位置和碰撞（我尝试制作一个视频游戏）。

要在 nodejs 上使用三个，我已经安装了“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');

同样，我有一个错误，“三个未定义”，我不明白为什么？

为了解决这个错误，我将 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

你不需要第二条线，即

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 放入变量中。

但是，我有第二个问题。此代码在接收到 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

搜索后，我尝试http://localhost:2999/js/essai/test.js像这样替换 url json：https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally 我可以使用这个 url 访问我的 json。

但是 XMLHttpRequest 没有定义，所以它什么都没有改变，我认为这是因为我尝试使用套接字函数来做到这一点，但我不确定。

于 2013-10-19T10:50:27.633 回答
0

我有最后一个问题。在节点服务器中，我加载 .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 回答