Skip to main content

3D Viewer

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

R2U.viewer.create#

mobile desktop

It is method for creates a 3D model viewer at the position of the HTML element indicated, by default expandable via popup

// test SKU -- remember to use your product information
//HTML element that will receive the 3D model
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 = 'https://real2u-public-assets.s3.amazonaws.com/images/cadeira.png'
R2U.viewer.create({ element, sku, name, popup, progressBarPosition, poster })

Parameter popup#

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

interface R2U {
viewer: {
create: (params: {
element: HTMLElement
sku: string
name?: string
popup?: boolean
}) => Promise<void>
}
}
Popup example:

Parameter progressBarPosition#

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

interface R2U {
viewer: {
create: (params: {
element: HTMLElement
sku: string
progressBarPosition?: 'top' | 'middle' | 'bottom'
}) => Promise<void>
}
}
ProgressBarPosition example on the desktop:

Parameter progressBarColor#

Sets the color of the progressBarPosition

interface R2U {
viewer: {
create: (params: {
element: HTMLElement
sku: string
progressBarColor?: string
}) => Promise<void>
}
}

Parameter poster#

Define an image on top of the 3D model that will be displayed when loading the model.

interface R2U {
viewer: {
create: (params: { element: HTMLElement; sku: string; poster?: string }) => Promise<void>
}
}

Change sku R2U.viewer.create#

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 = R2U.viewer.create({
element: changeSku,
sku,
name,
popup,
progressBarPosition,
poster
})
//change the sku at the click of the button
buttonChangeSku.addEventListener('click', () => {
handler.setSku('RE000002')
})
SetSku example:

R2U.qrCode.create#

Creates a QRCode that, when scanned, directs the user to the model in AR.

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