How to update your SuperViz integration with ThreeJs to v5

Posted by Vitor Norton | November 16, 2023

The SuperViz SDK received the long-awaited version 5! It comes with tons of new collaboration tools as you can see in our release notes. In this post, I’ll walk you through how to update your SuperViz integration with ThreeJS, from v4 to v5.

One notable change is the introduction of the “room” concept, which represents a collaborative space where components come together.

This post will cover the basics, and if you need any other details on what has changed, please take a look at our migration guide.

Update packages

Before you start, you need to update the @superviz/sdk to version 5.0.1 or higher, and the @superviz/threejs-plugin to version 0.14.0 or higher.

Code updates

In SuperViz SDK v5, the way you initialize components has been revamped.

You no longer initialize the video meeting along with the SDK in one go. Instead, you now need to initialize the SDK (and we are now calling this as a room) and all other components separately.

Step 1: update the SDK Initialization

The first step is to locate the SuperViz SDK constructor, it is the same place where you pass you DEVELOPER_KEY and the SDK options.

The list of itens on the SDK options is reduced, so you may need to remove some of these properties if you are using them:

participant.type, camsOff, screenshareOff, defaultAvatars, enableFollow, enableGoTo, enableGather, language, locales, customColors, avatars, devices object, skipMeetingSettings, camerasPosition, layoutPosition, are now under the Video Conference, as I will explain later in this post.
You can set isMouseEnabled and isLaserEnabled in the Matterport plugin.
participant.color and disableCameraOverlay should be removed.
We renamed the participant.avatar.model to participant.avatar.model3DUrl

In the end, you should have a code looking like this:

1import SuperVizRoom from '@superviz/sdk';
2
3// Create an instance of a room.
4// We updated the name SuperVizSdk to SuperVizRoom, but you can leave as you want.
5const room = await SuperVizRoom(DEVELOPER_KEY, {
6  roomId: "ROOM-ID",
7  group: {
8    id: "GROUP-ID",
9    name: "GROUP-NAME",
10  },
11  participant: {
12    id: "USER-ID",
13    name: "USER-NAME",
14    avatar: {
15      "model3DUrl": "<P className="xl:text-lg mb-4 lg:mb-6"ATH>"
16    }
17  },
18});

The code above shows how to initialize a room when you use SuperViz SDK as a package, that means, if you downloaded it from npm, pnpm or Yarn. If you are importing it from the <script> tag in HTML, the initialization is a bit different as it needs to be window.SuperVizRoom.init().

Once you done it, you have a room!

Step 2: Adding Video Conference component

Creating a room doesn’t mean that the video meeting will start. You must add it to the room. It’s quite simple, to add a Video Conference to the room, use the code below:

1import { VideoConference } from "@superviz/sdk/lib/components";
2
3// Create a Video component instance with the configuration you want
4const video = new VideoConference({
5  // ...
6  camsOff: false,
7  // ...
8});
9
10room.addComponent(video);

When creating a Video Conference, you can pass the properties that you removed before from the SDK Initialization. To check the full list of changes, heads up to the table of properties on the migration guide.

You can also check the Video Conference documentation for any further details, like events implementation.

Step 3: Update the ThreeJS integration with SuperViz

Previously, you would use loadPlugin() after a participant joined a room. Now, you must create an instance of Presence3D, and add it to the room. Here’s how to load the ThreeJS viewer:

1import { Presence3D } from "@superviz/threejs-plugin";
2
3const threeJSPresence = new Presence3D(scene, camera, camera, {
4  isAvatarsEnabled: true,
5  isLaserEnabled: true,
6  isNameEnabled: true,
7    isMouseEnabled: true,
8    renderLocalAvatar: true,
9  avatarConfig: {
10    height: 0,
11    scale: 1,
12    laserOrigin: { x: 0, y: 0, z: 0 },
13  },
14});
15
16room.addComponent(threeJSPresence);

After these three steps, you are good to go! Keep in mind that this is a high-level overview, and it’s essential to dive into the SDK documentation or our migration guide for detailed information and updates.

If you need any help updating, head to our Discord server!

Happy coding and enjoy the enhanced capabilities of SuperViz SDK v5!