Interacting with streams

Once you’ve added a stream, you can add controls to your scene so you can interact with your content.

Camera controls

To enable panning, rotating, and zooming on the whole scene, use Three.js’s built-in OrbitControls.

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

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

renderer.setAnimationLoop(() => {
  // Update the controls
  controls.update();
  renderer.render(scene, camera);
});

Object controls

// Import MirisControls
import { MirisControls, MirisStream } from "@miris-inc/three";

const stream = new MirisStream({ viewerKey: "VIEWER_KEY", uuid: "ASSET_ID" });

// Create the controls
const controls = new MirisControls(stream, camera, renderer.domElement);

renderer.setAnimationLoop(() => {
  // Update the controls
  controls.update();
  renderer.render(scene, camera);
});

You can also control multiple streams by passing an array:

const viewerKey = "VIEWER_KEY";
const streams = [
  new MirisStream({ viewerKey, uuid: "ASSET_ID_1" }),
  new MirisStream({ viewerKey, uuid: "ASSET_ID_2" }),
];

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

If you don’t have streams to control right away, you can pass in null as the first argument to MirisControls and call controls.objects.add() when you’re ready.

// Create the controls, not controlling anything initially
const controls = new MirisControls(null, camera, renderer.domElement);

// Later, add the streams to control
controls.objects.add(stream1);
controls.objects.add(stream2);

Combining controls

Since OrbitControls acts on the entire scene and MirisControls acts on objects, you may wish to combine both forms of controls so you can zoom and pan the scene but also be able to rotate streams individually.

import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { MirisControls } from "@miris-inc/three";

const cameraControls = new OrbitControls(camera, renderer.domElement);
const objectControls = new MirisControls(null, camera, renderer.domElement);

renderer.setAnimationLoop(() => {
  cameraControls.update();
  objectControls.update();
  renderer.render(scene, camera);
});