ThreeJsPresence

ThreeJsPresence automatically implements Avatars, Mouse Pointers and Presence Controls into a Three.js application.

How to use

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

Usage

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

function Room() {
  return <ThreeJsPresence scene={scene} camera={camera} player={player} />;
}

Properties

Name	Type	Description
scene	Scene	Required. The ThreeJS scene object, is already loaded.
camera	Camera	Required. The ThreeJS scene’s camera, previously created.
player	Object3D	Required. The 3D object you want your avatar to be added to. For first-person experiences, you can use camera objects here.
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. Default value: true
isMouseEnabled	boolean	Optional Defines whether Mouse pointers should be enabled or not. Default value: true
avatarConfig	Object	Optional The configuration object for the avatar. See the AvatarConfig section for more details.

Hooks

useThree

follow

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 3d world. If no ID is provided, the following feature is disabled.

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

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

  function unFollow() {
    follow();
  }

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

goto

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 } = 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
}