AR/3D Viewer customizations

Last updated: Jan-18-2023

Help us shape the future of 3D
3D is taking the world by storm! Share your plans and help shape our 3D product. Take the Survey.

The AR/3D Viewer allows different methods of customization.

On this page:

Personalized AR button

You can replace the View in AR button with your own custom CSS and text by using HTML5 slots. The button must include the following attribute slot="ar-button".

Copy to clipboard
<ar-3d-viewer cloud="demo" models="docs/CldLogo3D">
  <button slot="ar-button" class="some-class-name">Custom AR button</button>
</ar-3d-viewer>

Tip
Similarly, you can personalize the zoom buttons, using slots "zoom-in" and "zoom-out".

Personalized loader

The loader is what is shown while the 3D model is loading. You can replace the entire loader element by providing a slot div with the following attribute slot="loader".

The following example displays a spinner while the model is loading. Refresh the page to see the loader display.

Copy to clipboard
<div>
<ar-3d-viewer cloud="demo" models="docs/CldLogo3D">
  <div slot="loader" class="demo-loader"></div>
</ar-3d-viewer>
</div>

<style>
  .demo-loader {
    position: absolute;
    left: 45%;
    top: 30px;
    border: 16px solid #5A616A; 
    border-top: 16px solid #3448C5; 
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  } 

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

Background

The AR/3D Viewer is transparent, so you can provide any kind of background to the parent HTML5 element. For example:

Copy to clipboard
<div style="background-image: url(https://res.cloudinary.com/demo/image/upload/docs/raindrops.jpg)">
<ar-3d-viewer cloud="demo" models="docs/CldLogo3D"></ar-3d-viewer>
</div>

Localization

You can provide your own translation strings and toggle between locales on the fly by calling the loadLanguages and changeLanguage functions.

You need to replace all the following default string values:

  • Within the AR QR code dialog:
    • viewInAr: 'View in AR'
    • viewInSpace: 'View in your own space'
    • inAr: 'in augmented reality'
    • scanQrCode: 'Scan this qr code:'
    • clickToCopy: 'Or click to copy this url:'
  • Within the loader:
    • loadingModel: 'Loading 3D Model...'

Here's an example of replacing the English strings with Spanish:

Copy to clipboard
<ar-3d-viewer cloud="demo" models="docs/CldLogo3D"></ar-3d-viewer>

<script>
  const ar3DViewer = document.querySelector('ar-3d-viewer');
  ar3DViewer.loadLanguages({
        es: {
          arQr: {
            viewInAr: 'Ver en AR',
            viewInSpace: 'Ver en su propio espacio',
            inAr: 'en realidad aumentada',
            scanQrCode: 'Escanee este código QR:',
            clickToCopy: 'O haga clic para copiar esta URL:',
          },
          loader: {
            loadingModel: 'Cargando modelo 3D...',
          },
        },
      });

  // change to Spanish     
  ar3DViewer.changeLanguage('es');

  // change back to English
  ar3DViewer.changeLanguage('en');
</script>

Notes

  • If you provide your own custom strings for English you still need to call changeLanguage('en');.
  • You can use any value for the language code.

✔️ Feedback sent!

Rate this page: