Three on node.js with JSONLoader

Question

I need to use three.js on my node.js server to control positions and collisions on players (I try to make a video game).

To use three on nodejs, I have install with "npm install three", and it's works.

But when I want call JSONLoader, I can't.

I my class, I add :

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

or

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

It the same, I have an error, "THREE is not defined" and I don't undestand why?

To resolve this error i put the JSON code in the three.js file, but I find an other problem when I load json:

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

I think, I don't use correctly but I don't undestand where is my fault?

Can you help me plz?

Thank you very much.

Answer 1

You don't need the socond line, i.e.

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

If you load three.js properly, so e.g.

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

the JSONLoader is already there, so THREE.JSONLoader should work just fine.

BTW, the reason why you're getting this error is because the code of JSONLoader.js depends on existance of THREE object in the global scope. But, it's not there because your THREE object is local.

Answer 2

Thank you to your help.

I replace my code, indeed it's works better, i don't know why I have had JSONLoader.js into variable.

However, I have my second problem. This code run at reception to a socket in 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);
                    }); 
}

But my error is :

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

After search, i have try to replace url json by http://localhost:2999/js/essai/test.js like this : https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally And I have acces to my json with this url.

But XMLHttpRequest is not defined, so it's change nothing, I think it's because I try to do this with a socket function but i'm not sure.

Answer 3

I have a last one question. In node server I load .json file and put in to the scene to detect collisions.

Node:

 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 );
    });

To detect collision :

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");
                }
            }
        }

When I have try collision on the client , it's work fine, but on the server, he doesn't detect collisions. So, I have try to load json file in my client to see if the load is correctly.

When I load like this in my Client, the scene is ok:

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();
});

And when I load like this in Client, it's not ok:

$.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();
      });

No error, but nothing appear.

So I think is the same to the server side, and why collisions are never detect.

In the server side, I don't use animate() , because I think it's not necessary. And the calcul to deplace my car it's ok.

So I think maybe the loader don't load the mesh correctly, or I can't make detection collisions as on Client. What do you think?

Thx.

To detect collisions on Client I use:

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);

When I up, I set the direction : this.direction.set(0,0,1); When I down,I set the direction : this.direction.set(0,0,-1); ...