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