Presence3D

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

How to use

To initialize the Matterport Presence3D component, you can follow our quickstart guide.

Usage

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

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

When initializing the Presence3D component, you can pass the following properties:

Name	Type	Description
isAvatarsEnabled	boolean	Enable or disable the need for an avatar in the room. Default value: false
isLaserEnabled	boolean	Enable or disable laser pointers. If isAvatarsEnabled is set to false, this will also be false. Default value: false
isNameEnabled	boolean	Enable or disable showing the participant's name on top of the avatars. Default value: false
avatarConfig	AvatarConfig	Required. Configuration for the avatar, like scale, position, and laser configuration.

Methods

follow()

The follow() method, when called with a participant ID as an argument, allows other participants to follow the referenced participant on the Matterport. You can, after, call the method without parameters to stop following the participant.

Example:

// Pass a participant ID to start following it
matterportPresence.follow("<PARTICIPANT_ID>");

// Call the method without parameters to stop following the past participant
matterportPresence.follow();

goTo()

The goTo() method, when called with a participant ID as an argument, allows other participants to quickly jump to the referenced participant position on the Matterport, facilitating quick location of participants.

Example:

matterportPresence.goTo("<PARTICIPANT_ID>");

Types Definition

AvatarConfig

Type: object

An object describing the configuration for the avatar, like scale, position, and laser configuration.

Name	Type	Description
height	number	Required. The scale you want your avatar to be rendered, in pixels.
scale	number	Required. The height you want your avatar to be positioned from the ground, in pixels.
laserOrigin	Position	Required. Represents the origin position of your laser beam in relation to your avatar model.

Example:

avatarConfig: {
  height: 1.6,
  scale: 1,
  laserOrigin: {
    x: 0,
    y: 0,
    z: 0
  }
}

Position

Type: object

Represents the origin position of your laser beam in relation to your avatar model.

Name	Type	Description
x	number	Required. Represents the x-axis (horizontal) position.
y	number	Required. Represents the y-axis (vertical) position.
z	number	Required. Represents the z-axis (depth) position.

Example:

laserOrigin: {
  x: 0,
  y: 0,
  z: 0
}