API reference

note

TypeScript declarations are not currently available for this package.

<miris-scene>

Container for Miris content. Manages the renderer, camera, and controls.

Usage

<miris-scene viewer-key="VIEWER_KEY">
  <miris-stream uuid="ASSET_ID"></miris-stream>
</miris-scene>

Attributes

viewer-key

Your Miris viewer key.

info

A viewer key is required to stream.

Expects: string

Example

<miris-scene viewer-key="VIEWER_KEY"></miris-scene>

Properties

viewerKey

Your Miris viewer key.

Type: string

Example

const scene = document.querySelector("miris-scene");

scene.viewerKey = "q3b7L9kWZr2Y0dX8F5c1Qp6tHnJvM4sR2u8A9wB3CkE";

Methods

fetchAssets()

Get that assets available to your viewer key. Accepts an optional list of tags that may be a comma-separated string or array of strings.

Type

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

Example

const scene = document.querySelector("miris-scene");

// 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.

<miris-stream>

Streams a 3D asset into a <miris-scene>.

Usage

<miris-scene viewer-key="VIEWER_KEY">
  <miris-stream uuid="ASSET_ID"></miris-stream>
</miris-scene>

info

A <miris-stream> must always have a <miris-scene> ancestor.

Attributes

uuid

The stream UUID.

Example

<miris-stream uuid="ASSET_ID"></miris-stream>

position

Sets the X, Y, and Z position of the stream.

info

For performance reasons, avoid setting this attribute with setAttribute(). Instead, set the position property directly. See here for more details.

Expects: `${number} ${number} ${number}`

Example

<miris-stream position="0 0 -2" uuid="ASSET_ID"></miris-stream>

rotation

Sets the X, Y, and Z rotation of the stream in radians.

info

For performance reasons, avoid setting this attribute with setAttribute(). Instead, set the rotation property directly. See here for more details.

tip

To convert degrees to radians, multiply the number of degrees by π and divide by 180. For example, 90º is about 1.571 radians.

Expects: `${number} ${number} ${number}`

Example

<miris-stream rotation="0 1.571 0" uuid="ASSET_ID"></miris-stream>

scale

Sets the X, Y, and Z scale of the stream.

info

For performance reasons, avoid setting this attribute with setAttribute(). Instead, set the scale property directly. See here for more details.

Expects: `${number} ${number} ${number}`

Example

<miris-stream scale="2 2 2" uuid="ASSET_ID"></miris-stream>

disabled

Boolean attribute used to disable the stream.

Example

<miris-stream disabled uuid="ASSET_ID"></miris-stream>

Properties

uuid

The stream UUID.

Example

const stream = document.querySelector("miris-stream");

stream.uuid = "ASSET_ID";

position

Sets the X, Y, and Z position of the stream.

Type

{
  x: number,
  y: number,
  z: number,
  set(x: number, y: number, z: number): void
}

Default: { x: 0, y: 0, z: 0 }

Example

const stream = document.querySelector("miris-stream");

// set individual dimensions
stream.position.x = 42;

// set X, Y, and Z all at once
stream.position.set(5, 9, -6);

rotation

Sets the X, Y, and Z rotation of the stream in radians.

tip

To convert degrees to radians, multiply the number of degrees by π and divide by 180. For example, 90º is about 1.571 radians.

Type

{
  x: number,
  y: number,
  z: number,
  set(x: number, y: number, z: number): void
}

Default: { x: 0, y: 0, z: 0 }

Example

const stream = document.querySelector("miris-stream");

// set individual dimensions
stream.rotation.y = 1.571;

// set X, Y, and Z all at once
stream.rotation.set(0, 1.571, 3.142);

scale

Sets the X, Y, and Z scale of the stream.

Type

{
  x: number,
  y: number,
  z: number,
  set(x: number, y: number, z: number): void
}

Default: { x: 1, y: 1, z: 1 }

Example

const stream = document.querySelector("miris-stream");

// set individual dimensions
stream.scale.x = 2;

// set X, Y, and Z all at once
stream.scale.set(2, 2, 2);

controls

Example

const stream = document.querySelector("miris-stream");

stream.controls = true;

disabled

Example

const stream = document.querySelector("miris-stream");

stream.disabled = true;

Events

streamloaded

Fired when the stream finishes loading.

<miris-camera>

Use <miris-camera> to control the scene’s perspective camera.

Usage

<miris-scene viewer-key="VIEWER_KEY">
  <miris-camera controls position="0 0 5"></miris-camera>
  <miris-stream uuid="ASSET_ID"></miris-stream>
</miris-scene>

info

Only one <miris-camera> is permitted per <miris-scene>.

Attributes

position

Sets the X, Y, and Z position of the camera.

tip

For performance reasons, avoid setting this attribute with setAttribute(). Instead, set the position property directly. See here for more details.

Expects: `${number} ${number} ${number}`

Example

<miris-camera position="0 0 5"></miris-camera>

controls

Used to enable orbit controls for the scene.

Type: boolean
Details

Using this attribute enables the following controls:
- Rotate: drag with one finger or the main mouse button
- Pan: drag with two fingers or the secondary mouse button
- Zoom: pinch with two fingers or scroll with the mouse
warning
By default, the camera is positioned at the origin—(0, 0, 0)—which is the same point as the orbit target. Always set a nonzero position when using controls. position="0 0 5" is a good starting point.

Example

<miris-camera controls position="0 0 5"></miris-stream>

Properties

position

Sets the X, Y, and Z position of the camera.

Type

{
  x: number,
  y: number,
  z: number,
  set(x: number, y: number, z: number): void
}

Default: { x: 0, y: 0, z: 0 }

Example

const camera = document.querySelector("miris-camera");

// set individual dimensions
camera.position.x = 42;

// set X, Y, and Z all at once
camera.position.set(5, 9, -6);

fov

Sets the camera frustum’s vertical field of view in degrees.

Type: number
Default: the <miris-stream>’s aspect ratio

Example

const camera = document.querySelector("miris-camera");

camera.fov = 60;

near

Sets the camera frustum’s near clipping plane.

Type: number
Default: 0.1

Example

const camera = document.querySelector("miris-camera");

camera.near = 20;

far

Sets the camera frustum’s far clipping plane.

Type: number
Default: 300

Example

const camera = document.querySelector("miris-camera");

camera.far = 600;

<miris-group>

Groups multiple elements under a shared transform. Useful for arranging multiple streams together.

Usage

<miris-scene viewer-key="VIEWER_KEY">
  <miris-group position="0 1 0">
    <miris-stream uuid="ASSET_ID_A"></miris-stream>
    <miris-stream uuid="ASSET_ID_B" position="2 0 0"></miris-stream>
  </miris-group>
</miris-scene>

info

position, rotation, and scale values on group children are relative to the group’s local coordinate space. This means that the group’s rotation affects the direction of child translations, not just the child’s visual orientation.

Attributes

position

Sets the X, Y, and Z position of the group.

info

For performance reasons, avoid setting this attribute with setAttribute(). Instead, set the position property directly. See here for more details.

Expects: `${number} ${number} ${number}`

Example

<miris-group position="0 0 -2"></miris-group>

rotation

Sets the X, Y, and Z rotation of the stream in radians.

info

For performance reasons, avoid setting this attribute with setAttribute(). Instead, set the rotation property directly. See here for more details.

tip

To convert degrees to radians, multiply the number of degrees by π and divide by 180. For example, 90º is about 1.571 radians.

Expects: `${number} ${number} ${number}`

Example

<miris-group rotation="0 1.571 0"></miris-group>

scale

Sets the X, Y, and Z scale of the stream.

info

For performance reasons, avoid setting this attribute with setAttribute(). Instead, set the scale property directly. See here for more details.

Expects: `${number} ${number} ${number}`

Example

<miris-group scale="2 2 2"></miris-group>

Properties

position

Sets the X, Y, and Z position of the group.

Type

{
  x: number,
  y: number,
  z: number,
  set(x: number, y: number, z: number): void
}

Default: { x: 0, y: 0, z: 0 }

Example

const group = document.querySelector("miris-group");

// set individual dimensions
group.position.x = 42;

// set X, Y, and Z all at once
group.position.set(5, 9, -6);

rotation

Sets the X, Y, and Z rotation of the group in radians.

tip

To convert degrees to radians, multiply the number of degrees by π and divide by 180. For example, 90º is about 1.571 radians.

Type

{
  x: number,
  y: number,
  z: number,
  set(x: number, y: number, z: number): void
}

Default: { x: 0, y: 0, z: 0 }

Example

const group = document.querySelector("miris-group");

// set individual dimensions
group.rotation.y = 1.571;

// set X, Y, and Z all at once
group.rotation.set(0, 1.571, 3.142);

scale

Sets the X, Y, and Z scale of the group.

Type

{
  x: number,
  y: number,
  z: number,
  set(x: number, y: number, z: number): void
}

Default: { x: 1, y: 1, z: 1 }

Example

const group = document.querySelector("miris-group");

// set individual dimensions
group.scale.x = 2;

// set X, Y, and Z all at once
group.scale.set(2, 2, 2);

<miris-scene>​

Usage​

Attributes​

viewer-key​

Properties​

viewerKey​

Methods​

fetchAssets()​

Events​

sceneloaded​

<miris-stream>​

Usage​

Attributes​

uuid​

position​

rotation​

scale​

disabled​

Properties​

uuid​

position​

rotation​

scale​

controls​

disabled​

Events​

streamloaded​

<miris-camera>​

Usage​

Attributes​

position​

controls​

Properties​

position​

fov​

near​

far​

<miris-group>​

Usage​

Attributes​

position​

rotation​

scale​

Properties​

position​

rotation​

scale​

<miris-scene>

Usage

Attributes

viewer-key

Properties

viewerKey

Methods

fetchAssets()

Events

sceneloaded

<miris-stream>

Usage

Attributes

uuid

position

rotation

scale

disabled

Properties

uuid

position

rotation

scale

controls

disabled

Events

streamloaded

<miris-camera>

Usage

Attributes

position

controls

Properties

position

fov

near

far

<miris-group>

Usage

Attributes

position

rotation

scale

Properties

position

rotation

scale