Skip to main content

Presence3D

Matterport Presence3D automatically Implements Avatars, Mouse Pointers and Presence Controls into a Matterport SDK powered application.

Quickstart​

To add the Presence3D component to your application, follow the steps below:

1

Before we start

Before utilizing the Matterport Presence3D plugin, it is essential to initialize a room with a defined name and ID for the participant and the group. You need to have the room variable to add the Matterport Presence3D plugin.

2

Verify your Matterport SDK

To implement the Presence3D plugin it's essential that your you have access to the Matterport SDK instance that you will need to pass to our plugin.

Note that the minimum Matterport SDK Bundle version required is 3.1.77.2-1-g3baaac4893.

Here you can see a basic Matterport SDK implementation:

const bundleIframe = document.getElementById('showcase');
const showcaseWindow = bundleIframe.contentWindow;

showcase.addEventListener('load', async function() {
    const mpSDK = await showcaseWindow.MP_SDK.connect(
        showcaseWindow,
        MATTERPORT_KEY
    );

    mpSDK = await showcaseWindow.MP_SDK.connect(
        showcaseWindow,
        MATTERPORT_KEY
    ).then(onShowcaseConnect);
});

async function onShowcaseConnect(mpSdk) {
    console.log('Hello Bundle SDK', mpSdk);
}
3

Install the package

Install the Matterport plugin package with npm:

npm install --save @superviz/matterport-plugin
4

Import the Presence3D component

After installing the package, import the Presence3D component from the Matterport plugin:

import { Presence3D } from "@superviz/matterport-plugin";
5

Add the Presence3D plugin

Initialize the Presence3D plugin with the Matterport SDK instance and add it to your SuperViz room:

const matterportPresence = new Presence3D(mpSDK);

room.addComponent(matterportPresence);
6

Configure Presence3D (Optional)

You can customize the Presence3D component by passing configuration options when initializing it. These options allow you to control features such as avatars, laser pointers, and participant names. For a full list of available options, refer to our API Reference.

Here's an example of how to configure Presence3D with some common options:

const matterportPresence = new Presence3D(mpSDK, {
  isAvatarsEnabled: true,
  isLaserEnabled: true,
  isNameEnabled: true,
  avatarConfig: {
    height: 1.6,
    scale: 1,
    laserOrigin: { x: 0, y: 0, z: 0 },
  },
});

room.addComponent(matterportPresence);
7

Next steps

You are now all set! See what else can you do:

Matterport Plugin API Reference

Matterport Plugin API Reference

Resources to get you started​

We've prepared a few resources to help you get started with the Matterport integration and use it alosing with other components to create a collaborative environment.