三個在node.js上使用JSONLoader

Question

我需要在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'); 

它一樣，我有一個錯誤，「三是沒有定義」，我不爲什麼已瞭解？

爲了解決這個錯誤我放在three.js所文件中的JSON代碼，但我發現一個其他問題，當我加載JSON：

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

我想，我不正確地使用，但我不我不明白我的錯在哪裏？

你能幫我嗎？

非常感謝。

Answer 1

你不需要socond線，即

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

如果加載three.js正確，所以如

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

的JSONLoader已經存在，所以THREE.JSONLoader應該只是罰款。

BTW，爲什麼你得到這個錯誤的原因是因爲JSONLoader.js代碼依賴於在全球範圍內THREE對象的所有腦幹。但是，它不在那裏，因爲你的對象是本地的。

Answer 2

謝謝你的幫助。

我替換了我的代碼，的確效果更好，我不知道爲什麼我將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 我有存取權限的json這個網址。

但XMLHttpRequest沒有定義，所以它沒有改變，我認爲這是因爲我試圖用套接字函數來做到這一點，但我不確定。

Answer 3

我有最後一個問題。 在節點服務器中，我加載.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（），因爲我認爲這不是必需的。 和計算器取代我的車沒關係。

所以我想也許加載程序不能正確加載網格，或者我無法在客戶端上進行檢測衝突。 你覺得呢？

Thx。

爲了檢測在客戶端碰撞我使用：

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