Contextual Comments

Utilize Contextual Comments to integrate a personalized commenting feature into your ThreeJS model. This enables participants to add comments to specific points within the model, which can be viewable by everyone.

Quickstart

Contextual Comments for Three.js is an extension of the Contextual Comments Component. The difference from the default method is that we use the ThreeJsPin which automatically allow pins to work in a 3D environment.

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

1

Before we start

Before utilizing the Contextual Comments component, 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 component.

2

Verify your Matterport SDK

To implement Contextual Comments 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 comments and ThreeJsPin

After installing the package, import comments and the MatterportPin component from the Matterport plugin:

import { Comments } from '@superviz/sdk';
import { ThreeJsPin } from '@superviz/threejs-plugin';

5

Add comments and the ThreeJsPin plugin

Initialize the ThreeJsPin passing the scene, renderer and camera instances.

Add the Comments component and pass the pinAdapter instance.

Finally add the comments instance to your the room:

Then finally add the component to your SuperViz room:

const pinAdapter = new ThreeJsPin(scene, renderer, camera);
const comments = new Comments(pinAdapter);

room.addComponent(pinAdapter);

6

Next steps

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

Contextual Comments API Reference

Three.js 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​