DOCS

How to see other users’ avatar in your scene?

Often in a multi-user 3dverse application, you want to show your user where other users are positioned in the scene (i.e. where their camera is currently). A simple way to do this is by telling Livelink.js to render avatars for all connected clients:

  • Include the ClientDisplay extension in your HTML:
1
2
<script src="https://cdn.3dverse.com/legacy/sdk/stable/SDK3DVerse.js"></script>
<script src="https://cdn.3dverse.com/legacy/sdk/stable/SDK3DVerse_ClientDisplay_Ext.js"></script>
  • Before proceeding, you need to make sure you’re connected to a 3dverse session:
1
2
3
4
5
await SDK3DVerse.joinOrStartSession({
  sceneUUID: "YOUR_SCENE_UUID",
  userToken: "YOUR_USER_OR_PUBLIC_TOKEN",
  canvas: document.getElementById("my-canvas"),
});
  • Install the ClientDisplay extension in your JavaScript code (this can be called multiple times and :
1
2
3
const clientDisplayEX = await SDK3DVerse.installExtension(
  SDK3DVerse_ClientDisplay_Ext,
);
  • Enable client avatars (you need to make sure you connect to your session first):
1
2
3
4
5
6
7
8
9
10
11
12
clientDisplayEX.showClientAvatars({
  radius: 80, // pixels
  getClientAvatarSrc({ color }) {
    // it can be useful to use the assigned color
    // from 3dverse, which users can use to select
    // objects in the 3d scene
    return getImageUrlForColor(color);
  },
  getClientDisplayName({ clientUUID }) {
    return lookupNameForClientId(clientUUID);
  },
});
Previous
Use a Three.js Camera controller
Next
How to use the Labels extension