three.js socket.io多人遊戲系統

Question

所以我在three.js中構建了一個簡單的場景，玩起來很酷，但我想添加一些從socket.io服務器運行的多人遊戲功能，所以我添加了玩家這樣

var username = prompt("whats yo name") 

，然後當我這樣做的所有型號，裝載

socket.emit('addPlayer', username) 

所以後來我的服務器端發生這種情況

socket.on('addPlayer', function(username) { 
    players.push(username) 
    console.log(username + " joined") 
    console.log("online Users " + players) 
    socket.broadcast.emit('syncPlayers', players) 
    socket.emit('syncPlayers', players) 
}) 

所有的作品exatly我如何計劃

所以當syncPlayers被稱爲所有客戶端上

socket.on('syncPlayers', function(players) { 
    players.forEach(function(value) { 
     if (value == username) { 
      console.log("not adding " + value + " thats you ") 
     } else { 
      console.log("player Online " + value); 
      newplayer = value; 

      addPlayer(newplayer) 
     } 
    }); 
}) 

，然後當然addPlayer被稱爲傳遞VAR新玩家

function addPlayer() { 
    console.log("adding " + newplayer) 
    charObjectName = newplayer + "Char" 
    console.log("added" + charObjectName) 
    charObjectName = new THREE.Mesh(
     new THREE.BoxGeometry(3, 3, 3), 
     new THREE.MeshPhongMaterial({ 
      color: 0xffffff, 
      map: crateTexture, 
      bumpMap: crateBumpMap, 
      normalMap: crateNormalMap 
     }) 

    ); 
    scene.add(charObjectName) 
    charObjectName.position.set(10, 10, 10) 
} 

權現在我讓每個新玩家成爲一個立方體，因爲它會一直說undefined或什麼的，當我嘗試加載一個加載的模型，但那是另一次

但我認爲我的問題可能可能在於該行

charObjectName = newplayer + "Char"

喜歡也許沒有被正確設置，所以我的控制檯登錄它，它是i的值預期

但是當我嘗試更新的玩家立方體的位置，這樣

if (keyboard[87]) { // W key 
     camera.position.x -= Math.sin(camera.rotation.y) * player.speed; 
     camera.position.z -= -Math.cos(camera.rotation.y) * player.speed; 
     socket.emit('updateXZPos', username, camera.position.x, camera.position.z) 
    } 
    if (keyboard[83]) { // S key 
     camera.position.x += Math.sin(camera.rotation.y) * player.speed; 
     camera.position.z += -Math.cos(camera.rotation.y) * player.speed; 
     socket.emit('updateXZPos', username, camera.position.x, camera.position.z) 
    } 
    if (keyboard[65]) { // A key 
     camera.position.x += Math.sin(camera.rotation.y + Math.PI/2) * player.speed; 
     camera.position.z += -Math.cos(camera.rotation.y + Math.PI/2) * player.speed; 
     socket.emit('updateXZPos', username, camera.position.x, camera.position.z) 
    } 
    if (keyboard[68]) { // D key 
     camera.position.x += Math.sin(camera.rotation.y - Math.PI/2) * player.speed; 
     camera.position.z += -Math.cos(camera.rotation.y - Math.PI/2) * player.speed; 
     socket.emit('updateXZPos', username, camera.position.x, camera.position.z) 
    } 

有位置，這是它在服務器端

socket.on('updateXZPos', function(username, pos1, pos2) { 

    console.log(username + ' x-' + pos1 + '- y-' + pos2) 
    socket.broadcast.emit('updateZPos', username, pos1, pos2) 
}) 

和我得到的控制檯登錄的事情完全

然後當我打電話updateZPos功能

socket.on('updateZPos', function(username, pos1, pos2) { 
    console.log(pos1 + pos2) 
    toMove = username + "Char" 
    console.log(toMove) 
    toMove.position.x = pos2, toMove.position.z = pos2 
}) 

的不確定顯然我不能設置x屬性，因此VAR toMove心不是可能糾正在客戶端上？

對不起，如果這是一些簡單的一個曠日持久的問題，但其真正困擾我

Answer 1

在創建THREEJS盒你這樣做：

charObjectName = newplayer + "Char" 
charObjectName = new THREE.Mesh(...); 

基本上意味着「將一個字符串轉換爲變量charObjectName，然後用引用三個網格來覆蓋該字符串。「

然後嘗試與

toMove = username + "Char" 
toMove.position.x = pos2, toMove.position.z = pos2 

這意味着訪問同一對象‘把一個字符串變量toMove，然後嘗試對象中的對象position內更新財產xtoMove’

但正如你看到的，toMove擁有一個字符串，而不是到三個參考網。

你可能會想嘗試，並保存所有對象中的相關引用。像這樣：

var threeObjects = {}; 

// setting 
function addPlayer(playerName) { 
    var charObjectName = playerName + "Char" 
    var threeObject = new THREE.Mesh(
     new THREE.BoxGeometry(3, 3, 3), 
     new THREE.MeshPhongMaterial({ 
      color: 0xffffff, 
      map: crateTexture, 
      bumpMap: crateBumpMap, 
      normalMap: crateNormalMap 
     }) 

    ); 
    scene.add(threeObject) 
    threeObject.position.set(10, 10, 10) 
    // set reference 
    threeObjects[charObjectName] = threeObject; 
} 

// retrieving 
socket.on('updateZPos', function(username, pos1, pos2) { 
    toMove = threeObjects[username + "Char"] 
    toMove.position.x = pos1; 
    toMove.position.z = pos2; 
}) 

一般來說，多人遊戲，尤其是在網絡上是一個非常細微的話題。如果你有興趣瞭解更多關於它一個很好的資源可以在這個開放源碼庫中找到 - lance.gg