Presence3D

Three.js Presence3D automatically Implements Avatars, Mouse Pointers and Presence Controls into a Three.js application.

Quickstart

To add the Presence3D component to your application, follow the steps below:

1

Before we start

Before utilizing the Three.js Presence3D plugin, it is essential to initialize a room with a defined name and ID for the participant and the group. You need to have the room variable to add the Three.js Presence3D plugin.

2

Verify your Three.js implementation

To implement the Presence3D plugin it's essential that your you have access to the scene and camera that you will need to pass to our plugin.

Note that the minimum Three.js version required is0.164.0

Here you can see a basic Three.js implementation:

import * as THREE from "three";

import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

const container = document.getElementById("participant-canvas");
const width = container.clientWidth;
const height = container.clientHeight;

const renderer = new THREE.WebGLRenderer({ canvas: container, antialias: true });
renderer.setSize(width, height);

const pmremGenerator = new THREE.PMREMGenerator(renderer);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xb6b7b8);
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
const camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 300);
camera.position.set(2, 0, 2);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0.5, 0);
controls.update();
controls.enablePan = false;
controls.enableDamping = true;

const loader = new GLTFLoader();
loader.load(
  "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/GlamVelvetSofa/glTF-Binary/GlamVelvetSofa.glb",
  function (gltf) {
    scene.add(gltf.scene);
    animate();
  }
);

const animate = () => {
  requestAnimationFrame(animate);
  controls.update();

  renderer.render(scene, camera);
};

animate();

3

Install the package

Install the Three.js plugin package with npm:

npm install --save @superviz/threejs-plugin

4

Import the Presence3D component

After installing the package, import the Presence3D component from the Three.js plugin:

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

5

Add the Presence3D plugin

Initialize the Presence3D plugin with the scene and camera instances and add it to your SuperViz room:

const threeJSPresence = new Presence3D(scene, camera, camera )

room.addComponent(threeJSPresence);

6

Configure Presence3D (Optional)

You can customize the Presence3D component by passing configuration options when initializing it. These options allow you to control features such as avatars, laser pointers, and participant names. For a full list of available options, refer to our API Reference.

Here's an example of how to configure Presence3D with some common options:

const threeJSPresence = new Presence3D(scene, camera, camera, {
  isAvatarsEnabled: true,
  isLaserEnabled: true,
  isNameEnabled: true,
  avatarConfig: {
    height: 1.6,
    scale: 1,
    laserOrigin: { x: 0, y: 0, z: 0 },
  },
});

room.addComponent(threeJSPresence);

7

Next steps

You are now all set! See what else can you do:

Three.js Plugin API Reference

Resources to get you started

We've prepared a few resources to help you get started with the Three.js integration and use it alosing with other components to create a collaborative environment.

Quickstart​