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)
await 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')
await 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.