Skip to main content

API reference

note

TypeScript declarations are not currently available for this package.

MirisScene​

Used to set a global viewer key for convenience. Extends THREE.Scene.

Usage​

import { MirisScene } from "@miris-inc/three";

new MirisScene({ viewerKey: "VIEWER_KEY" });

Types​

SceneInit​

type SceneInit = {
  viewerKey?: string | null;
};

Methods​

constructor()​

  • Type

    function constructor(init: SceneInit): MirisScene;

  • Example:

    const scene = new MirisScene({ viewerKey: "VIEWER_KEY" });

fetchAssets()​

Fetch available assets, optionally filtered by tags. Accepts a comma-separated string or an array of tag strings.

  • Type

    function fetchAssets(tags?: string | string[]): Promise<
      {
        uuid: string;
        name: string;
        tags: string[];
        thumbnailUrl: string;
        contentUrl: string;
      }[]
    >;

  • Example

    const scene = new MirisScene({ viewerKey: "VIEWER_KEY" });

    // Get all assets
    await scene.fetchAssets();

    // Filter assets by tags (comma-separated)
    await scene.fetchAssets("tag-one,tag-two");

    // Or filter by using an array of tags
    await scene.fetchAssets(["tag-one", "tag-two"]);

Events​

sceneloaded​

Fired when the scene finishes loading

MirisStream​

Used to insert a Miris stream into a scene. Extends THREE.Group.

tip

MirisStream extends THREE.Group, so you can use it just like any THREE.Object3D.

Types​

StreamInit​

type StreamInit = {
  uuid: string;
  viewerKey?: string;
};

Usage​

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

// Use it like any THREE.Object3D
stream.position.set(0, 1, -2);
stream.rotation.y = (90 * Math.PI) / 180;
stream.scale.set(2, 2, 2);

// Add it to your scene to begin streaming
scene.add(stream);

Properties​

uuid​

The asset ID.

  • Type: string

  • Example:

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

    console.log(stream.uuid); // "ASSET_ID"

viewerKey​

Your Miris viewer key.

  • Type: string

  • Example

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

    console.log(stream.viewerKey); // "VIEWER_KEY"

isStream​

Always true. Use to identify MirisStream instances.

  • Type: true

  • Example:

    scene.traverse((object) => {
      if (object.isStream) {
        console.log("Found a stream!");
      }
    });

Methods​

constructor()​

Create a new MirisStream instance.

info

If you're not using MirisScene, a viewer key is required. If you are, your viewer key will be inherited from the MirisScene.

  • Type:

    function constructor(init: StreamInit): MirisStream;

  • Example:

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

    scene.add(stream);

Events​

streamloaded​

Fired when the stream finishes loading

MirisControls​

Enables drag-to-rotate interaction on one or more MirisStream objects. Extends THREE.Controls.

Usage​

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

const objects = [stream1, stream2, stream3];
const controls = new MirisControls(objects, camera, renderer.domElement);

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

Methods​

Properties​

objects​

The objects to be controlled.

  • Type: readonly Set<Object3D>

  • Example

    const stream = new MirisStream({ uuid: "ASSET_ID" });
    const controls = new MirisControls(null, camera, renderer.domElement);

    // Add an object
    controls.objects.add(stream);

    // Remove an object
    controls.objects.remove(stream);

    // Remove all objects
    controls.objects.clear();

Methods​

constructor()​

Creates a new MirisControls instance by specifying the objects you’d like to control, as well as the camera and renderer DOM element.

  • Type:

    function constructor(
      objects: THREE.Object3D | Iterable<THREE.Object3D> | null,
      camera: THREE.Camera,
      domElement: HTMLElement,
    ): MirisControls;

  • Example:

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

dispose()​

Performs cleanup by removing DOM event listeners.

  • Type:

    function dispose(): void

  • Example:

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

    // Later, when controls are no longer needed
    controls.dispose();

Events​

start​

Fired when interaction has begun.

end​

Fired when interaction has stopped.