In this article, I will show you how to add a custom avatar on SuperViz Presence3D.
3D file compatibility
If you want to use a custom 3D model as your avatar in SuperViz Presence3D, you can import a glb file when creating a room. A glb file is a binary format that stores 3D models and animations in a single file.
If you are interested in learning how to create your own 3D avatar from a photo and use it in various 3D platforms, you might want to check out this blog post by SuperViz: How to Build Your Own 3D Avatar. In this post, you will find a step-by-step guide on how to use Ready Player Me, a cross-game avatar platform, to generate a personalized 3D model in GLB format.
Using the avatar object
Once you have your glb file, you should make it available to be accessible from a URL. Then you can use it in your 3D environment, for Matterport, Autodesk Viewer and Three.js, by adding an avatar object. Here is what the object should look like:
avatar: {
"imageUrl": "https://<PATH>",
"model3DUrl": "https://<PATH>",
}
This object contains two properties, the imageUrl and the model3DUrl. The first one should be a thumbnail image of the 3D model; it can be a .png or .jpg. While model3DUrl is the path to a 3D model itself.
Adding avatar to the participant
Now that we understand the avatar object, let’s insert it to the participant on the SuperViz Room constructor, like in the code below:
const room = await SuperVizRoom(DEVELOPER_KEY, {
roomId: "<ROOM-ID>",
group: {
id: "<GROUP-ID>",
name: "<GROUP-NAME>",
},
participant: {
id: "<USER-ID>",
name: "<USER-NAME>",
// Adding the avatar inside the participant
avatar: {
"imageUrl": "https://<PATH>",
"model3DUrl": "https://<PATH>",
}
},
});
Now you should your custom avatar in the Presence3D for that participant.
I hope that this tutorial will help you to create more engaging and immersive web applications with SuperViz. If you have any questions, comments, or feedback, please feel free to join our Discord server and chat with us.
