Getting started
Initial commit
First of all we need to add @roomle/web-sdk
to our npm dependencies and setup a build process. To finally load something you will need to do the following:
import RoomleSdk from "@roomle/web-sdk";
// set the URL from where you want to load
// the data, normally that's api.roomle.com/v2
RoomleSdk.setGlobalInitData({
customApiUrl: "https://api.roomle.com/v2",
});
const glbViewerawait = RoomleSdk.getGlbViewer();
glbViewer.boot();
glbViewerApi = await glbViewer.getApi();
const scene = document.querySelector(".scene");
await glbViewerApi.init(scene);
// Load a static item by the id
await glbViewerApi.loadStaticItem("roomle_content_demo:kitchenware003");
Loading different items
If you finished step one you where already able to load a static item. You only need to bind the method loadStaticItem
to a click event. We suggest something like:
const loadObject = async (id: string) => {
await glbViewerApi.loadStaticItem(id);
}
Opening AR
To open AR you can use the quick-look features of Android and iOS. For Android a GLB is needed and for iOS a USDZ file.
To fetch the URL of the GLB you can use the module Rapi Access. This works as follows:
const rapiAccess = await RoomleSdk.getRapiAccess();
const itemData = await rapiAccess.getItem(initialId);
const { assets } = await rapiAccess.getItem(id);
const arUrl = isIOs() ? assets.usdz.url : createAndroidARUrl(assets.glb.url);
For platform specific details please visit one of the following links:
Code Sandbox
Since we only showed the relevant code in the snippets it's time to have a look on the working example. You can find it here in our CodeSandbox example.
Last updated