Version: Version 2.0

Contextual Comments

Three.js Contextual Comments automatically implements the Contextual Comments feature into a Three.js application.

Quickstart

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

Before we start

Before utilizing the Three.js Contextual Comments 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 Contextual Comments plugin.

Install the packages

Install the required packages with npm:

npm install --save @superviz/threejs-plugin @superviz/collaboration

Import the Comments component

After installing the package, import the Comments component:

import { Comments } from "@superviz/collaboration";

Add the Comments plugin

Initialize the Comments plugin with the Three.js scene and camera instances and add it to your SuperViz room:

const threeJsComments = new Comments(scene, camera);
room.addComponent(threeJsComments);

Configure Comments (Optional)

You can customize the Comments component by passing configuration options when initializing it:

const threeJsComments = new Comments(scene, camera, {
  position: 'right',
  width: 400,
  height: '100vh',
});

room.addComponent(threeJsComments);

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​