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.

R2U.viewer.create#

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 = 'https://real2u-public-assets.s3.amazonaws.com/images/cadeira.png'
R2U.viewer.create({ element, sku, name, popup, progressBarPosition, poster })
parameterdescriptiondefault
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

popup#

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

Popup example:

progressBarPosition#

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 = 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 QR Code that, when scanned, redirects the user to the model in AR.

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