three.js socket.io multiplayer system

Question

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

var username = prompt("whats yo name")

and then i do this when all the models are loaded

socket.emit('addPlayer', username)

so then on my server side this happens

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)
})

all of that works exatly how i planned

so when syncPlayers is called on all the clients

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)
        }
    });
})

and then of course addPlayer is called passing the var new player

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)
}

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

but i thought that my problem could possibly lie in this line

charObjectName = newplayer + "Char"

like maybe it wasn't being set correctly so i console logged it and it is the value i expected

but when i try to update the position of the players cube to there position like this

    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)
    }

and this is what it does on the server side

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

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

and i get the console to log things perfectly

then on the client when i call updateZPos function

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
})

apparently i cant set x property of undefined so the var toMove isnt correct maybe?

sorry if this is a long drawn out question for something simple but its really bothering me

function addPlayer() should accept a param, no? -- function addPlayer(player). I know you're getting the values you expect either way but that seems weird to me. When you console.log(toMove) - you're getting the value you expect? — Christopher Messer
– Christopher Messer, Commented Aug 12, 2017 at 16:37
@NikHendricks Please provide a code snippet for other people to access — TheHaloDeveloper
– TheHaloDeveloper, Commented Mar 8, 2022 at 16:21
@NikHendricks A Repl would be best because it has server side capability — TheHaloDeveloper
– TheHaloDeveloper, Commented Mar 15, 2022 at 18:39

OpherV · Accepted Answer · 2021-09-28 16:30:10Z

When creating the THREEJS box you're doing this:

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

Which essentially means "place a string into variable charObjectName, then overwrite that string with a reference to a Three Mesh."

Then you try to retrieve the same object with

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

which means "put a string in variable toMove, then try to update property x within the object position within the object toMove"

but as you see, toMove holds a string and not a reference to a Three mesh.

You might want to try and hold all the relevant references in an object. Like so:

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;
})

Multiplayer in general, and on the web in particular is a very nuanced topic. If you're interested to read more about it a good resource can be found in this open source library - lance

Collectives™ on Stack Overflow

three.js socket.io multiplayer system

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related