title: three.js socket.io multiplayer system
body: <p>So i have built a simple scene in three.js and its really cool to play with but i was wanting to add some multiplayer capability running from a socket.io server so i add the player like this </p>
  
  <pre><code>var username = prompt("whats yo name")
  </code></pre>
  
  <p>and then i do this when all the models are loaded</p>
  
  <pre><code>socket.emit('addPlayer', username)
  </code></pre>
  
  <p>so then on my server side this happens</p>
  
  <pre><code>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)
  })
  </code></pre>
  
  <p>all of that works exatly how i planned </p>
  
  <p>so when <code>syncPlayers</code> is called on all the clients</p>
  
  <pre><code>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)
          }
      });
  })
  </code></pre>
  
  <p>and then of course addPlayer is called passing the var new player</p>
  
  <pre><code>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)
  }
  </code></pre>
  
  <p>right now i make each new player a cube because it keeps saying undefined or something when i try to load a loaded model but thats for another time </p>
  
  <p>but i thought that my problem could possibly lie in this line </p>
  
  <p><code>charObjectName = newplayer + "Char"</code></p>
  
  <p>like maybe it wasn't being set correctly so i console logged it and it is the value i expected</p>
  
  <p>but when i try to update the position of the players cube to there position like this</p>
  
  <pre><code>    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)
      }
  </code></pre>
  
  <p>and this is what it does on the server side </p>
  
  <pre><code>socket.on('updateXZPos', function(username, pos1, pos2) {
  
      console.log(username + ' x-' + pos1 + '-   y-' + pos2)
      socket.broadcast.emit('updateZPos', username, pos1, pos2)
  })
  </code></pre>
  
  <p>and i get the console to log things perfectly</p>
  
  <p>then on the client when i call updateZPos function</p>
  
  <pre><code>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
  })
  </code></pre>
  
  <p>apparently i cant set x property of undefined so the var <code>toMove</code> isnt correct maybe? </p>
  
  <p>sorry if this is a long drawn out question for something simple but its really bothering me </p>