AutodeskPresence

AutodeskPresence automatically implements Avatars, Mouse Pointers and Presence Controls into a Autodesk APS viewer.

How to use

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

Usage

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

return (
  <AutodeskPresence
    viewer={viewer}
  >
    <div id="forge-viewer"></div>
  </AutodeskPresence>
);

Properties

Name	Type	Description
Viewer	Autodesk.Viewing.GuiViewer3D	Required. The Autodesk Viewer instance
isAvatarsEnabled	boolean	Optional. Defines whether avatars should be enabled or not. Default value: true
isLaserEnabled	boolean	Optional. Defines whether laser pointers should be enabled or not. If isAvatarsEnabled is set to false, then isLaserEnabled will also be false. Default value: true
isNameEnabled	boolean	Optional. Defines whether the name above the avatars should be enabled or not.
isMouseEnabled	boolean	Optional. Defines whether Mouse pointers should be enabled or not. Default value: true
avatarConfig	AvatarConfig	Optional. The configuration object for the avatar. See the AvatarConfig section for more details.

Hooks

useAutodesk

follow

Type: (participantId?: string) => void

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

Example:

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

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

  function unFollow() {
    follow();
  }

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

goto

Type: (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.

Example:

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

  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	number	Required. 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
}