Presence for Three.js

The Three.js plugin is designed to seamlessly integrate Presence controls, Mouse Pointers, avatars, and lasers into your Three.js application.

Before we start

Before utilizing the Three.js plugin, it is essential to initialize a room with a defined name and ID for the participant.

Below are a few important notes:

• If you want to use 3D avatars, see initialization for further info. if no avatar has been provided, then a default avatar from SuperViz will be used.
• The minimum ThreeJs version required is 0.147.0.

tip

When using Video Conference together with Presence for Three.js, you can enable users to select from our list of avatars, by setting the flag defaultAvatars as true on the Video Conference constructor.

Initializing ThreeJS

To initialize the Presence for Three.js, you will need to first create a scene and a camera with the Three.js Model, like in the code below:

const element = document.getElementById("element-id");

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: element });

To allow the participant’s camera to orbit around the target it’s also important to enable OrbitControls from Three.js, like in the code below:

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const renderer = new THREE.WebGLRenderer();
const camera = new THREE.PerspectiveCamera(45, 1, 1, 10000);

const controls = new OrbitControls(camera, renderer.domElement);

How to use

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

function Room() {

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

export default Room;

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.

The minimum Autodesk Platform Services Viewer version required is version 7.

useThree Hook

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
}