Initialization and options

Initialize rooomSpaces Viewer API with SpaceViewer constructor for virtual environments and immersive experiences. Learn iframe binding, space-specific configuration options.

SpaceViewer(iframe)

This constructor returns a new rooom space viewer instance bound to the specified iframe element.

Example:

Vanilla JS

// Get the iframe element
var iframe = document.getElementById("space-viewer"); 
var viewer = new SpaceViewer(iframe);

TypeScript

import { SpaceViewer } from '@rooom/spaces-viewer';

// Get the iframe element with proper typing
const iframe = document.getElementById("space-viewer") as HTMLIFrameElement; 
const viewer = new SpaceViewer(iframe);

Vue.js

<template>
  <iframe ref="spaceViewer" id="space-viewer"></iframe>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { SpaceViewer } from '@rooom/spaces-viewer';

const spaceViewer = ref(null);

onMounted(() => {
  const viewer = new SpaceViewer(spaceViewer.value); 
});
</script>

React

import React, { useRef, useEffect } from 'react';
import { SpaceViewer } from '@rooom/spaces-viewer';

function SpaceViewerComponent() {
  const iframeRef = useRef(null);

  useEffect(() => {
    if (iframeRef.current) {
      const viewer = new SpaceViewer(iframeRef.current); 
    }
  }, []);

  return <iframe ref={iframeRef} id="space-viewer" />;
}

init(id, options)

This function initializes a viewer with the specified ID. The ID is the identifier part in a viewer URL. You can also pass an options object to this function - see available options.

NOTE

The space ID is a unique identifier for each 3D space. You can find it in your rooom dashboard or in the space URL.

// Initialize viewer with space ID and options
viewer.init("123456789123456789", {
  onSuccess: function onSuccessFn(api) {
    console.log('Space viewer initialized successfully'); 
  },
  onError: function onErrorFn() {
    console.error('Failed to initialize space viewer'); 
  },
  autostart: 1, // Auto-start the viewer
  max_texture_size: 1024, // Optimize texture size for performance
});

Customization

You can pass callbacks and customization options when you initialize a viewer.

viewer.init("123456789123456789", {
  onSuccess: function onSuccessFn(api) {},
  onError: function onErrorFn() {},
  autostart: 1,
  max_texture_size: 1024,
});

Alternatively, you can pass customization options as URL parameters, as described in the URL parameters customization guide.

Callbacks

onSuccess - function(api)

Required. This callback will be invoked when the viewer has been successfully initialized. It will be passed an API object that allows you to interact with the viewer.

onError - function()

This callback will be invoked when the viewer cannot be initialized.