Adding streams

Adding a stream to a scene

Adding streams to a Three.js scene is easy. Just import MirisStream, supply your viewer key and asset ID, and add it to the scene.

// Import dependencies
import { PerspectiveCamera, Scene, WebGLRenderer } from "three";
import { MirisStream } from "@miris-inc/three";

// Create the renderer, scene, and camera
const renderer = new WebGLRenderer();
const scene = new Scene();
const camera = new PerspectiveCamera(50, innerWidth / innerHeight);

// Set the renderer's size and animation loop
renderer.setSize(innerWidth, innerHeight);
renderer.setAnimationLoop(() => renderer.render(scene, camera));

// Add the renderer's DOM element to the document
document.body.append(renderer.domElement);

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

// Put the stream in front of the camera
stream.position.z = -5;

// Add the stream to the scene
scene.add(stream);

Using MirisScene

You can use MirisScene instead of THREE.Scene to set a default viewer key for the scene. That way, you won’t need to specify a key for each individual MirisStream.

// Import dependencies
import { PerspectiveCamera, Scene, WebGLRenderer } from "three";
import { MirisScene, MirisStream } from "@miris-inc/three";

// Create the renderer, scene, and camera
const renderer = new WebGLRenderer();
const scene = new MirisScene({ viewerKey: "VIEWER_KEY" });
const camera = new PerspectiveCamera(50, innerWidth / innerHeight);

// Set the renderer's size and animation loop
renderer.setSize(innerWidth, innerHeight);
renderer.setAnimationLoop(() => renderer.render(scene, camera));

// Add the renderer's DOM element to the document
document.body.append(renderer.domElement);

// Create the stream
const stream = new MirisStream({ uuid: "ASSET_ID" }); // No viewer key needed

// Put the stream in front of the camera
stream.position.z = -5;

// Add the stream to the scene
scene.add(stream);

If you’d like, you can supply a viewer key to MirisScene