Introduction
The Viewer API allows you to build web applications on top of rooom's space-viewer. With this API, you can control the viewer using JavaScript. It provides functions for starting and stopping the viewer, moving the camera, taking screenshots, and much more.
Getting started
To use the viewer API in a website, follow these 3 steps:
- Insert this script in your page:
space-viewer-latest.min.js - Add an empty
iframeelement - Initialize the viewer via JavaScript
Example
Here is a ready-to-use example for a space-viewer:
Interactive Example
Click the CodeSandbox link above to open an interactive code editor where you can modify and test the space-viewer API in real-time.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rooom Viewer Example</title>
<!-- Insert this script -->
<script type="text/javascript" src="https://static.rooom.com/viewer-api/space-viewer-latest.min.js"></script>
</head>
<body>
<!-- Insert an empty iframe -->
<iframe src="" id="viewer" allow="autoplay; fullscreen; vr" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<!-- Initialize the viewer -->
<script type="text/javascript">
var iframe = document.getElementById('viewer');
var id = 'f7ef4851b8';
var viewer = new SpaceViewer(iframe);
viewer.init(id, {
onSuccess: function onSuccessFn(api){
api.on('viewer.start', function() {
// API is ready to use
console.log('Viewer started');
});
}
});
</script>
</body>
</html>API Reference
Essential Foundations
Start here - these are required for any space viewer implementation
Initialization
Learn how to initialize the space viewer and configure basic settings.
General Functions
Core viewer functions for basic control and interaction (start, stop, focus).
Camera Control
Control camera position, rotation, and movement within the 3D space.
Events
Handle viewer events and user interactions for reactive applications.
Core Interactions
Essential features for interactive virtual spaces
Objects
Interact with 3D objects, geometries, and scene elements.
Avatar
Control user avatar appearance and behavior in multiplayer spaces.
Lights
Control lighting conditions and environmental illumination.
Materials
Modify material properties, textures, and visual appearance.
⚡ Advanced Features
Specialized functionality for dynamic and rich experiences
Animations
Control and trigger space animations and interactive sequences.
Asset Loading
Dynamically load 3D models, meshes, and content into virtual spaces.
Sound Management
Control audio atmosphere, ambient sounds, and space audio settings.
Video Controls
Manage video playback, timing, and multimedia content in virtual spaces.
Specialized Tools
Niche features for specific use cases and advanced implementations
Microphone Controls
Handle voice communication and microphone settings for multiplayer environments.
User Interface Controls
Control modals, chat interfaces, and user interface elements.
Minimap & Quality Controls
Manage navigation aids, rendering quality, and performance optimization.
Visual Enhancement
Optional effects and advanced rendering features
Post Processing
Apply visual effects and filters to enhance the rendered scene.
Particle Systems
Control particle effects, emissions, and dynamic environmental effects.
Environmental Effects
Manage fog, atmospheric conditions, and environmental rendering effects.