MatterportPin

Utilize Contextual Comments to integrate a personalized commenting feature into your Matterport 3D model. This enables participants to add comments to specific locations within the Matterport model, viewable by everyone in the room.

Before we start

It is important to initialize a room with a defined name and ID for the participant and the group, as it will be used to store the comment data on our servers.

Initializing Matterport SDK

To initialize the Contextual Comments for Matterport, you will need to first have an iframe loaded with the Matterport SDK Bundle and have it accessible from a variable, similar to the code below:

<iframe
  src="/bundle/showcase.html?m=[YOUR_SDK_KEY_HERE]"
  id="showcase">
</iframe>

const showcase = document.getElementById("showcase");
const showcaseWindow = showcase.contentWindow;

showcase.addEventListener('load', async () => {
  if(!showcaseWindow) return;

  const mpSdk = await showcaseWindow.MP_SDK.connect(showcaseWindow);
});

The minimum Matterport SDK Bundle version required is 3.1.77.2-1-g3baaac4893.

warning

To make sure everything works fine, make sure to use the SDK Bundle and not the SDK for Embeds when using Matterport.

Installing SuperViz Matterport extension

The Presence3D component is not available from the @superviz/sdk package, instead, to use Presence 3D you must use the @superviz/matterport-plugin package.

Install with CDN

To use the @superviz/matterport-plugin package please add the script below before the </head>

<script type="module" src="https://unpkg.com/@superviz/matterport-plugin@latest"></script>

Install with npm

To install the @superviz/matterport-plugin package with npm, run the following command:

npm install --save @superviz/matterport-plugin

Install with Yarn

To install the @superviz/matterport-plugin package with Yarn, run the following command:

yarn add @superviz/matterport-plugin

Install with pnpm

To install the @superviz/matterport-plugin package with pnpm, run the following command:

pnpm install --save @superviz/matterport-plugin

How to use it

Before creating the Comments component, you will the to use theMatterportPin adapter. To construct it, you will need to pass the Matterport SDK, used for Presence3D, and the iframe where the Matterport model is loaded.

import { MatterportPin } from '@superviz/matterport-plugin';

// iframe where the Matterport will be loaded
const showcase = document.getElementById("showcase-id");

// Matterport SDK instance, after the iframe is loaded
const mpSdk = await showcaseWindow.MP_SDK.connect(showcaseWindow);

// Creating a MatterportPin adapter
const pinAdapter = new MatterportPin(mpSDK, showcase);

warning

Please, make sure to only initialize the adapter once the Matterport Bundle iframe is fully loaded, otherwise, you won’t be able to initialize the use of the component.

Properties

See below the parameters to use in the constructor of the MatterportPin:

Name	Type	Description
matterportSDK	Matteport	Required. An instance of the Matterport SDK Bundle.
showcase	HTMLElement	Required. The element where the Matterport SDK Bundle is loaded.

Adding Comments Component

After initializing the MatterportPin, you can pass it as a parameter for the Comments component, similar to the following code:

import { Comments } from '@superviz/sdk/lib/components';
import { MatterportPin } from '@superviz/matterport-plugin';

// Creating a MatterportPin adapter
const pinAdapter = new MatterportPin(mpSDK, showcase);

// Construct the Comments with the MatterportPin adapter
const comments = new Comments(pinAdapter);
room.addComponent(comments);