Viewer API Introduction
The Viewer API allows you to build web applications on top of rooom's product-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:
product-viewer-latest.min.js - Add an empty
iframeelement - Initialize the viewer via JavaScript
Example
Here is a ready-to-use example for a product viewer:
Interactive Example
Click the CodeSandbox link above to open an interactive code editor where you can modify and test the product-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/product-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 = 'e725a9e18cb87bbc2977b73d4bdc65';
var viewer = new ProductViewer(iframe);
viewer.init(id, {
onSuccess: function onSuccessFn(api){
api.on('viewer.start', function() {
console.log('Viewer started');
});
}
});
</script>
</body>
</html>API Reference
Initialization
Learn how to initialize the product viewer and configure basic settings.
General Functions
Core viewer functions for basic control and interaction.
Camera Control
Control camera position, rotation, and movement within the 3D scene.
Events
Handle viewer events and user interactions.
Animations
Control and trigger product animations.
Annotations
Manage product annotations and hotspots.
Lights
Control lighting conditions and effects.
Materials
Modify material properties and textures.
Objects
Interact with 3D objects and scene elements.
Particle Systems
Control particle effects and animations.
Post Processing
Apply visual effects and filters to the rendered scene.
Getting Help
For additional examples and advanced usage, explore the individual API sections above or check out our interactive playground.