MatterportPresence

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

How to use

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

Usage

import { MatterportPresence } from "@superviz/react-sdk";

return (
  <MatterportPresence
    matterportSdkInstance={mpSdkInstance}
  >
    <iframe id="showcase" />
  </MatterportPresence>
);

Properties

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

Hooks

useMatterport

follow

Type: function (participantId?: string) => void

When called with a participant ID as an argument, this function enables other participants to follow the specified participant in the Matterport 3D space. If no ID is provided, the follow feature is disabled.

function Room() {
  const { follow } = useMatterport();

  function followUser() {
    follow("participant-id");
  }

  function unFollow() {
    follow();
  }

  return (
    <>
      <button onClick={followUser}>Follow user</button>
      <button onClick={unFollow}>Unfollow</button>
    </>
  );
}

goto

Type: function (participantId: string) => void

When invoked with a participant ID as an argument, this function allows other participants to instantly navigate to the specified participant's position in the 3D space, enabling easy and quick location of participants.

function Room() {
  const { goTo } = useMatterport();

  function goToUser() {
    goTo("participant-id");
  }

  return <button onClick={goToUser}>Go to user</button>;
}

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 height you want your avatar to be positioned from the ground, in pixels.
scale	number	Required. The scale you want your avatar to be rendered, in percent 0 to 1.
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
}