ThreeJS，Websockets和NodeJS客戶端/服務器實驗

Question

我正在用socket.io，ThreeJS，Javascript和NodeJS來創建一個使用ThreeJS圖形的簡單客戶端/服務器。我不確定所有這些框架是否能夠一起工作，但是我決定給它一個鏡頭，因爲我之前在網上看到過類似的例子，儘管我找不到一個簡單的剖析或試驗。這主要是爲了嘗試，但我也想做一個小小的概念遊戲來證明我迄今爲止學到了什麼。

我貼我的代碼在這裏：https://gist.github.com/netsider/63c414d83bd806b4e7eb

很抱歉，如果這是一個有點凌亂，但我盡我所能去讓它儘可能地易讀。

基本上，現在服務器端的NodeJS腳本似乎運行正常（運行時使用「node server-alpha.js」）和客戶端腳本（client-alpha.html，您可以在瀏覽器中打開）連接到服務器，並顯示用戶列表（他們也連接）。然而，我的意圖是讓每個用戶能夠移動他/她自己的立方體，現在每個立方體只能被添加到屏幕上（而不是被添加，減去，然後再次添加 - 以給出運動的幻覺）。如果你運行兩段代碼並連接一個或兩個用戶，併爲每個用戶移動箭頭鍵幾次，你會看到我在說什麼。

有人可以幫我嗎？我嘗試了幾種不同的方法來刪除多維數據集（並且記得在每個之後調用render（））...但是我嘗試的所有內容似乎都不起作用。它總是導致立方體被添加到屏幕上，並且永遠不會被減去。

我在代碼中添加了一些註釋，讓事情變得更容易，因爲我知道這是相當多的代碼（如果它不是您自己的，無論如何）。

謝謝，任何幫助將不勝感激......因爲我真的堅持試圖讓立方體移動。

此外，我在添加Fly-Controls（FlyControls.js - 它被註釋掉ATM）時遇到了問題，所以如果有人能告訴我我出錯的地方，我會很感激。

Answer 1

好，所以你不想再重新制作立方體，你只需要改變位置即可。

另外，在遊戲開發，這幾乎是使用面向對象的設計，一個很好的方式去了解這將是使玩家對象的要求，所以..

CPlayerList = new Array(); // an array of player objects 
 

 
function ClientPlayer() 
 
{ 
 
    this.Cube; 
 
    this.Name = "unnamed"; 
 
    this.Id = 0; 
 

 
    this.Create = function(name,pos,id) 
 
    { 
 
     this.Name = name; 
 
     this.Id = id; 
 

 
     var cubeGeometry = new THREE.BoxGeometry(10, 10, 10); 
 
     var cubeMaterial = new THREE.MeshLambertMaterial({color: 'red', transparent:false, opacity:1.0}); 
 

 
     this.Cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 
 

 
\t this.Cube.position.x = pos.x; 
 
     this.Cube.position.y = pos.y; 
 
     this.Cube.position.z = 20; // don't know why this is 20, remember y axis is up & down in opengl/threejs 
 
\t  
 
     scene.add(this.Cube); 
 
    } 
 
    
 
    this.Move = function(vector) 
 
    { 
 
     this.Cube.position.set(this.Cube.position.x + vector.x, this.Cube.position.y + vector.y, 20); 
 
    } 
 
}

因此，在服務器上，您需要一個持有類似數據的ServerPlayer對象，並在將它們發送給客戶端之前在服務器上分配ids。因此，當您將它發送給客戶端時，您想創建一個新的ClientPlayer，請致電播放器。創建（），然後將其推到CPlayerList，像這樣：

function newCPlayer(data) 
 
{ 
 
    var newPly = new ClientPlayer(); 
 
    newPly.Create(data.name,data.pos,data.id); 
 
    CPlayerList.push(newPly); 
 
}

然後當你打電話給你movePlayer（）函數，你可以簡單地通過你的球員陣列循環

function movePlayer(keyStroke, clientID) 
 
{ 
 
    if (keyStroke == 39) 
 
    { 
 
     CPlayerList.forEach(function(player,i,a) 
 
     { 
 
      if(player.Id === clientID) 
 
      { 
 
       player.Move(new THREE.Vector3(1,0,0)); 
 
      } 
 
     } 
 
    } 
 
}

這只是客戶端代碼，但是這個sho幫助你開始，讓我知道你有什麼不清楚的地方。

同樣在這裏是使用了類似的設計遊戲的例子：http://82.199.155.77:3000/（CTRL +在鉻移+ J，以查看客戶端源）和服務器代碼：http://pastebin.com/PRPaimG9