Skip to main content

Controlling the camera

Every scene includes a default camera that is positioned at the origin—(0, 0, 0)—and looks down the negative Z-axis. To override this behavior, use the <miris-camera> element.

Adding a camera​

<miris-scene viewer-key="VIEWER_KEY">
  <!-- Doesn’t do anything special (yet) -->
  <miris-camera></miris-camera>
  <miris-stream uuid="ASSET_ID"></miris-stream>
</miris-scene>

Positioning the camera​

Adding a camera to the scene won’t do anything special on its own since it will behave just like the default camera.

To move the camera, set a position attribute, just like you would with a <miris-stream>.

<miris-scene viewer-key="VIEWER_KEY">
  <!-- Positions the camera further back -->
  <miris-camera position="0 0 5"></miris-camera>
  <miris-stream uuid="ASSET_ID"></miris-stream>
</miris-scene>

Adding controls​

<miris-scene viewer-key="VIEWER_KEY">
  <!-- Positions the camera further back -->
  <miris-camera position="0 0 5" controls></miris-camera>
  <miris-stream uuid="ASSET_ID"></miris-stream>
</miris-scene>

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.