Probi3D

Easily display 3D products on the web & in AR

Quick Start

<!-- Add the viewer in the HTML -->
<iframe id="viewer" src="https://probi3d.flotr.fr"></iframe>

<!-- Load the product when the viewer is ready -->
<script>
  const viewer = document.getElementById('viewer')

  window.addEventListener('message', event => {

  	if (event.data.type === 'PMT_Ready') {
  		viewer.contentWindow.postMessage({
  			type: 'PMT_SetProductSrc',
  			src: 'https://exemple.com/product.glb' }, '*')
  	}

  })
</script>

How AR works

The viewer displays a button to start viewing the product in AR on both mobile and desktop devices.

Two scenarios are possible when the user starts augmented reality depending the current device:

1. On mobile device the viewer automatically launch the iOS Quick Look app or the Android Scene Viewer app

2. On a desktop device the viewer can display a QR Code to scan with a mobile device to allow the user to launch the AR from the latter

For this second scenario to work you need to specify which url is encoded in the QR Code. Basically the current url but you can choose the url of your choice to customize the experience.

If no URL is specified, the AR start button is not displayed on desktop devices.

See the PMT_SetQrcodeArUrl Post Message to learn how to specify the url.

Getting Started

The viewer is hosted at https://probi3d.flotr.fr

Load the viewer in an iframe

<iframe id="viewer" src="https://probi3d.flotr.fr"></iframe>

Customize the viewer with URL parameters

<iframe id="viewer" src="https://probi3d.flotr.fr/?autorotate=false">
</iframe>

Attach the listener and wait for the event PMT_Ready

<script>
	window.addEventListener('message', event => {
	
		if (event.data.type === 'PMT_Ready') {
			// The viewer is ready to receive post messages
		}
	})
</script>

Load the product with the post message PMT_SetProductSrc

<script>
	window.addEventListener('message', event => {
		
		if (event.data.type === 'PMT_Ready') {
		
			const viewer = document.getElementById('viewer')
			viewer.contentWindow.postMessage({
				type: 'PMT_SetProductSrc', 
				src: 'https://exemple.com/product.glb' }, '*')
		}
		
	})
</script>

Events

PMT_Ready

Sent when the viewer is fully loaded and ready to display a product

window.addEventListener('message', event => {
		if (event.data.type === 'PMT_Ready') {
			// The viewer is ready to receive post messages
		}
	})

Post Messages

PMT_SetProductSrc

Load a product into the viewer

postMessage({
	type: 'PMT_SetProductSrc', 
	src: 'https://website.com/product.glb' }, '*')

PMT_SetBackgroundColor

Customize the background color of the viewer. White by default

postMessage({
	type: 'PMT_SetBackgroundColor', 
	color: '#fefae0' }, '*')

Equivalent URL parameter

'https://probi3d.flotr.fr/?bgcolor=linen'

PMT_SetAutoRotateEnabled

Enables or disables the auto-rotation of the model. Enabled by default

postMessage({
	type: 'PMT_SetAutoRotateEnabled', 
	enabled: false }, '*')

Equivalent URL parameter

'https://probi3d.flotr.fr/?autorotate=false'

PMT_SetDimensionsEnabled

Enables or disables the button to display the product dimensions. Enabled by default

postMessage({
	type: 'PMT_SetDimensionsEnabled', 
	enabled: false }, '*')

Equivalent URL parameter

'https://probi3d.flotr.fr/?dimensions=false'

PMT_SetScreenshotEnabled

Enables or disables the button to take a screenshot of the product. Enabled by default

postMessage({
	type: 'PMT_SetScreenshotEnabled', 
	enabled: false }, '*')

Equivalent URL parameter

'https://probi3d.flotr.fr/?screenshot=false'

PMT_SetResetEnabled

Enables or disables the button to reset the product to his original position. Enabled by default

postMessage({
	type: 'PMT_SetResetEnabled', 
	enabled: false }, '*')

Equivalent URL parameter

'https://probi3d.flotr.fr/?reset=false'

PMT_SetArEnabled

Enables or disables the button to view the product in Augmented Reality. Enabled by default

postMessage({
	type: 'PMT_SetArEnabled', 
	enabled: false }, '*')

Equivalent URL parameter

'https://probi3d.flotr.fr/?ar=false'

PMT_SetQrcodeArUrl

Indicate which URL is encoded in the QR code when AR is launched from a desktop device

postMessage({
	type: 'PMT_SetQrcodeArUrl', 
	url: 'https://exemple.com' }, '*')