Space Viewer Initialization

Initialize the rooomSpaces viewer for virtual showrooms, interactive environments, and immersive experiences. The SpaceViewer is optimized for navigating and interacting within 3D virtual spaces.

SpaceViewer(iframe)

This constructor returns a new rooom space viewer instance bound to the specified iframe element. The SpaceViewer is specifically designed for immersive virtual environment applications.

Virtual Showroom Example:

Vanilla JS

// Get the iframe element
var iframe = document.getElementById("space-viewer"); 
var viewer = new SpaceViewer(iframe);
// Now ready to create immersive virtual experiences

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);
// Now ready to create immersive virtual experiences

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); 
  // Now ready to create immersive virtual experiences
});
</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); // [!code highlight]
      // Now ready to create immersive virtual experiences
    }
  }, []);

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

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.