At this point, the multiplayer experience is working, but players still can’t see or interact with each other. Let’s fix that by adding visible avatars.

First, add a “Regular man” item (or any other 3D model you prefer) to your scene. Name this model “man” and add the code below to the beginning of your script. Reference this model so it can serve as a prototype for player avatars. Be sure to hide it and exclude it from synchronization — we’ll use it only as a base for real players’ avatars.

1let characterProto = Scene.getItem("man");
2characterProto.multiplayer.synchronized = false;
3characterProto.active = false;

Next, add the lines below to the end of your startMultiplayer function, to create a copy of this prototype for each player.

1let character = characterProto.copy();
2character.active = true;
3character.multiplayer.synchronized = true;

Remember that copies inherit the same property values as the original — which means both active and synchronized are initially set to false. You’ll need to manually set these to true so that each player’s avatar is visible and synchronized across all connected clients.

Finally, synchronize the character’s position with the camera. To do this, add this code:

1Time.scheduleRepeating(() => {
2    character.transform.position = cameraItem.transform.position;
3    let forward = cameraItem.transform.forward;
4    character.transform.setDirection(new Vector3(forward.x, forward.y, 0));
5    character.transform.translateLocal(Vector3.axisY.mult(-0.25));
6    character.transform.translateLocal(Vector3.axisZ.mult(-1.7));
7});
8
9Camera.addToCollisionFilter(character);

Here, Time.scheduleRepeating is used to continuously update the character’s position so it matches the camera’s movement each frame. Getting this alignment right takes a few small adjustments:

• The camera usually floats above the ground, while the character’s pivot is set at the feet. To make the avatar stand naturally on the floor, move it slightly downward along the Z-axis.
• Shift the character a bit backward on the Y-axis so it stays behind the camera and doesn’t block the view.
• Don’t copy the camera’s full direction. Instead, ignore the Z component so the character stays upright. In a more advanced setup, you could use that Z component to animate head movement, but for now the character should remain vertically aligned.
• Turn off collisions between the camera and the avatar. Since they occupy nearly the same space, collisions can cause unwanted shaking or jitter.

Once these adjustments are in place, start the game again and join from another browser window. You’ll now see both characters moving, your first multiplayer scene where players can actually see one another!

Now that players can see one another, the Experience already feels more alive, but our characters are still hovering in place. In the next lesson, we’ll bring them to life with smooth animations that make the Experience feel real and dynamic.

‍

‍