问题
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.
回答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.
回答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.
回答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); ...
来源：https://stackoverflow.com/questions/19455087/three-on-node-js-with-jsonloader