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

customizer

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.