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.

One thing you probably don't want to do is declare a variable named JSON: stackoverflow.com/questions/4857072/… — fakewaffle
– fakewaffle, Commented Oct 18, 2013 at 18:06

Tomasz Lenarcik · Accepted Answer · 2013-10-18 19:05:00Z

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.

answered Oct 18, 2013 at 19:05

Tomasz Lenarcik

4,92021 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gaet · Accepted Answer · 2013-10-19 10:50:27Z

0

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.

answered Oct 19, 2013 at 10:50

gaet

1136 bronze badges

1 Comment

Tomasz Lenarcik Over a year ago

XMLHttpRequest won't work server side. What you actually need to do is to obtain the json file somehow (look here for example) and then use JSONLoader.parse method (look [here] for documentation).

gaet · Accepted Answer · 2013-10-20 11:57:38Z

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

First, I think that if you want to ask another question you should post a new question, not an answer :) Second, if I were you, I would check - somehow - whether my model loads properlly on the server. Maybe use some console listings or something of this type.
Ok, I will try. If I don't find, I will create a new question with more explain.

Collectives™ on Stack Overflow

Three on node.js with JSONLoader

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related