Problem with displaying other players

p5.js
1

I’m currently programming a simple game to test out p5.js where you fly around in space, there is a bunch of earths, and now I tried to add multiplayer with node.js, but I have a problem with displaying the other players, which I do with this function:

function showOthers(players) {
  for (let id in players) {
    if (id != socket.id) {
      const c = players[id];
      push();
      translate(-c.pos.x, -c.pos.y, -c.pos.z);
      const r = sqrt(c.Z.x * c.Z.x + c.Z.z * c.Z.z);
      const xAngle = asin(c.Z.y);
      let yAngle = acos(c.Z.z / r);
      if (c.Z.x < 0) yAngle *= -1;
      rotateY(yAngle);
      rotateX(-xAngle);
      scale(0.5);
      texture(xwingtexture);
      rotateX(PI / 2);
      model(xwing);
      pop();
    }
  }
}

where players is a JSON object which holds each player.
The code is executing, but I can’t see the other player. I also found out that there is no problem with the server code, and that the players have the data of the other players, so I think the problem must be in this function.
For reference, this is an example player:

{
X: {x: 1, y: 0, z: 0},
Y: {x: 0, y: 1, z: 0},
Z: {x: 0, y: 0, z: -1},
pos: {x: -500, y: -500, z: 500}
}
2

Here is the full client side code if it helps:

let planets;
let X, Y, Z;
let pos;
let alphax = 0,
  alphay = 0,
  speed = 0;
const socket = io();

function windowResized(){
  resizeCanvas(windowWidth-20,windowHeight-20)
}

function showPlayer() {
  camera(0, 0, height * 0.5, 0, 0, 0, 0, 1, 0);
  push();
  translate(0, height / 10, 0);
  scale(0.8);
  texture(xwingtexture);
  rotateX(PI / 2);
  rotateX(alphax);
  rotateY(alphay);
  //normalMaterial();
  model(xwing);
  pop();
}

  function showOthers(players) {
    for (let id in players) {
      if (id != socket.id) {
        const c = players[id];
        push();
        translate(-c.pos.x, -c.pos.y, -c.pos.z);
        const r = sqrt(c.Z.x * c.Z.x + c.Z.z * c.Z.z);
        const xAngle = asin(c.Z.y);
        let yAngle = acos(c.Z.z / r);
        if (c.Z.x < 0) yAngle *= -1;
        rotateY(yAngle);
        rotateX(-xAngle);
        scale(0.5);
        texture(xwingtexture);
        rotateX(PI / 2);
        model(xwing); 
        pop();
      }
    }
  }

function steering() {
  if (keyIsPressed) {
    let da = 0.01;
    let maxang = PI / 4;
    if (keyCode == UP_ARROW) {
      if (alphax > -maxang) alphax -= 2 * da;
      Z.rot(X, da);
      Y.rot(X, da);
    }
    if (keyCode == DOWN_ARROW) {
      if (alphax < maxang) alphax += 2 * da;
      Z.rot(X, -da);
      Y.rot(X, -da);
    }
    if (keyCode == LEFT_ARROW) {
      if (alphay > -maxang) alphay -= 2 * da;
      Z.rot(Y, da);
      X.rot(Y, da);
    }
    if (keyCode == RIGHT_ARROW) {
      if (alphay < +maxang) alphay += 2 * da;
      Z.rot(Y, -da);
      X.rot(Y, -da);
    }
    if (key == 'w') {
      if (speed < 8) speed += 0.1;
    }
    if (key == 's') {
      if (speed > -4) speed -= 0.1;
    }
  } else {
    alphax *= 0.85;
    alphay *= 0.85;
    speed *= 0.99;
  }
  pos.update(Z, speed);
  socket.emit("update_player",{X:X,Y:Y,Z:Z,pos:pos})
}

function setup() {
  img = loadImage('static/Images/earth.jpg');
  xwing = loadModel('static/Images/xwing.obj', true);
  xwingtexture = loadImage('static/Images/metall.jpg');
  X = new Vec(1, 0, 0);
  Y = new Vec(0, 1, 0);
  Z = new Vec(0, 0, -1);
  pos = new Vec(-500, -500, 500);
  createCanvas(windowWidth, windowHeight, WEBGL);
  ambientLight(100);
  directionalLight(200, 200, 200, 1, -1, -1);
  planets = [];
  for (let i = 0; i < 6; ++i)
    for (let j = 0; j < 6; ++j)
      for (let k = 0; k < 6; ++k)
        planets.push(new Planet(200 * i, 200 * k, 200 * j));
  socket.emit('new_player',{X:X,Y:Y,Z:Z,pos:pos});
}
socket.on('state', (players) => {
  background(0);
  steering();
  showPlayer();
  camera(Z.x, Z.y, Z.z, 0, 0, 0, Y.x, Y.y, Y.z);
  showOthers(players)
  translate(pos.x, pos.y, pos.z);
  for (let planet of planets)
    planet.show();
});



class Planet {
  constructor(x, y, z, r) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.r = r;
  }
  show() {
    push();
    translate(this.x, this.y, this.z);
    rotateY(millis() / 1000);
    texture(img);
    noStroke();
    sphere(this.r);
    pop();
  }
}



class Vec {
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
  //Drehung um die Achse n um einen kleinen Winkel alpha
  rot(n, alpha) {
    let dx = (n.y * this.z - n.z * this.y) * alpha;
    let dy = (n.z * this.x - n.x * this.z) * alpha;
    let dz = (n.x * this.y - n.y * this.x) * alpha;
    this.x += dx;
    this.y += dy;
    this.z += dz;
  }
  update(v, t) {
    this.x += v.x * t;
    this.y += v.y * t;
    this.z += v.z * t;
  }
}