Skip to main content

ThreeJsPin API Reference

ThreeJsPin is a PinAdapter for the Contextual Comments component and allows you to integrate Contextual Comments into a Three.js application.

How to use

To initialize the ThreeJsPin you can follow our quickstart guide.

Usage

Before creating the Comments component, you will need to initialize the ThreeJSPin adapter. You will need to pass the scene, renderer, and camera object from your ThreeJS initialization.

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

// Creating a ThreeJSPin adapter
const pinAdapter = new ThreeJsPin(scene, renderer, camera, player);

Properties

The table below shows the arguments passed on the constructor object:

NameTypeDescription
sceneSceneRequired. The ThreeJS scene object, already loaded.
rendererRendererRequired. The Renderer in Three.js is responsible for drawing the 3D scene onto a 2D canvas in the web browser. It takes the scene and camera as inputs and uses WebGL (via WebGLRenderer) to produce hardware-accelerated graphics. The Renderer is created at the start of a Three.js application and its render() method is called each frame to update the view.
cameraCameraRequired. The ThreeJS scene’s camera, previously created.
playerObject3DOptional. The 3D object you want your avatar to be added to. For first-person experiences you can use cameras object here.
If no player is provided, we’ll use the camera.
controlsOrbitControlsRequired if using OrbitControls. The ThreeJS OrbitControls object, previously created.