我需要在我的节点上使用三个.js.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.
我想,我没有正确使用,但我没有弄清楚我的错在哪里?
你能帮我吗?
谢谢。
你不需要socond线,即
var JSON = require('three/src/loaders/JSONLoader.js');
如果您正确加载three.js
,例如
var THREE = require('three/three.js')
JSONLoader
已经存在,所以THREE.JSONLoader
应该可以正常工作。
顺便说一句,您收到此错误的原因是JSONLoader.js
的代码取决于全局范围内THREE
对象的存在。但是,它不存在,因为您的THREE
对象是本地的。
谢谢你的帮助。
我替换了我的代码,确实效果更好,我不知道为什么我有 JSONLoader.js 到变量中。
但是,我有第二个问题。此代码在接收到节点.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:wampwwwSiteThreeOnNodekartnode_modu
lesthreethree.js:9974:16)
at THREE.JSONLoader.load (C:wampwwwSiteThreeOnNodekartnode_modulesthre
ethree.js:9968:7)
at C:wampwwwSiteThreeOnNodekartroutesroom.js:37:12
搜索后,我尝试将网址 json 替换为这样的http://localhost:2999/js/essai/test.js
:https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally我可以使用此网址访问我的 json。
但是XMLHttpRequest没有定义,所以它没有任何变化,我认为这是因为我尝试使用套接字函数执行此操作,但我不确定。
我还有最后一个问题。在节点服务器中,我加载 .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);...