Skip to main content

3D Viewer

After adding the script tag to your website, the methods for creating the 3D Viewer will be available through the global R2U object.

3D Viewer


mobile desktop

Creates a 3D viewer on the website in the position of the indicated HTML element.

// test SKU -- remember to use your product information

//HTML element that will receive the 3D viewer
const element = document.getElementById('3d-viewer')
//Desired product SKU
const sku = 'RE000001'
//name of the product that will be rendered
const name = 'Cadeira Eames'
//expandable 3D viewer
const popup = false
//3D model loading bar position
const progressBarPosition = 'middle'
//insert an image on top of the 3D model while loading the model
const poster = ''

await R2U.viewer.create({ element, sku, name, popup, progressBarPosition, poster })
elementHTML element that will receive the 3D viewer''
skuproduct SKU''
nameproduct nameproduct name on R2U platform
popupallows the 3D viewer to be expandable through a popup buttontrue
progressBarPositiondefines the progress bar position ('top', 'middle' or 'bottom')'top'
progressBarColorprogress bar color ('gray', 'rgba(89, 84, 84, 0.6)', '#c5c5c5')null
posterallows an image to be exhibited while the 3D model is loadingnull

Enables and disables the button to open the expandable 3D viewer with the model.

Popup example:



Defines the position in which the progress bar will be inserted.

ProgressBarPosition example on the desktop:

Change R2U.viewer's sku

The setSku method updates the product SKU.

// test SKU -- remember to use your product information
const buttonChangeSku = document.getElementById('button-changeSku')
const changeSku = document.getElementById('viewer-changeSku')

// create will return a handler with function to change sku
const handler = await R2U.viewer.create({
element: changeSku,
//change the sku at the click of the button
buttonChangeSku.addEventListener('click', () => {
setSku example:

3D viewer setsku


Creates a QR Code that, when scanned, redirects the user to the model in AR.

const element = document.getElementById('qrCode')
await R2U.qrCode.create({ element, sku })