Skip to main content

3D Customizer

After adding the script tag to your website, the methods for creating the 3D Customizer will be available through the global R2U object (live demo).

R2U.customizer.create#

mobile desktop

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

const element = document.getElementById('3d-customizer')
const onConfirm = (productCustomization) =>
console.log('customization selected', productCustomization)
R2U.customizer.create({ element, onConfirm })

The onConfirm function is triggered after the user clicks on the "Confirm" button on the Customizer screen. It returns a key-value pair containing the product customization (e.g. key model value Eames chair, key color value Black, etc.)

const element = document.getElementById('3d-customizer')
const onConfirm = (productCustomization) =>
console.log('customization selected', productCustomization)
const resultContainer = document.getElementById('createViewerCustomization')
R2U.customizer.create({ element, onConfirm, resultContainer })

The resultContainer element (optional) is created after the user clicks the "Confirm" button in the Customizer screen. It returns an HTML element that renders the 3D customization result.