Visualizador 3D

Após adicionar a tag JavaScript ao seu site, os métodos de criação do visualizador 3D estarão disponíveis através do objeto global R2U.

R2U.viewer.create

mobile desktop

Cria um visualizador 3D no site na posição do elemento HTML indicado.

// Elemento HTML que receberá o visualizador 3D
const element = document.getElementById('3d-viewer')
// SKU do produto desejado
const sku = 'RE000001'
// nome do produto que será processado
const name = 'Cadeira Eames'
// visualizador 3D expansível
const popup = false
// Posição da barra de carregamento do modelo 3D
const progressBarPosition = 'middle'
// insira uma imagem em cima do modelo 3D enquanto o modelo carrega
const poster = 'https://real2u-public-assets.s3.amazonaws.com/images/cadeira.png'

R2U.viewer.create({ element, sku, name, popup, progressBarPosition, poster })

parâmetro	descrição	default
element	elemento HTML que receberá o visualizador 3D	''
sku	SKU do produto	''
name	nome do produto	nome do produto na plataforma R2U
popup	permite que o visualizador 3D seja expansível por meio de um botão pop-up	true
progressBarPosition	define a posição da barra de progresso ('top', 'middle' or 'bottom')	'top'
progressBarColor	cor da barra de progresso ('gray', 'rgba(89, 84, 84, 0.6)', '#c5c5c5')	null
poster	permite que uma imagem seja exibida enquanto o modelo 3D está carregando	null

popup

Ativa e desativa o botão para abrir o visualizador 3D expansível com o modelo.

Popup example:

progressBarPosition

Define a posição em que a barra de progresso será inserida.

Exemplo de ProgressBarPosition no desktop:

top

middle

bottom

Alterar o SKU do R2U.viewer

O método setSku atualiza o SKU do produto.

const buttonChangeSku = document.getElementById('button-changeSku')
const changeSku = document.getElementById('viewer-changeSku')

// create retornará um handler com uma função para alterar o sku
const handler = R2U.viewer.create({
  element: changeSku,
  sku,
  name,
  popup,
  progressBarPosition,
  poster
})
// mude o sku com o clique do botão
buttonChangeSku.addEventListener('click', () => {
  handler.setSku('RE000002')
})

Exemplo de setSku:

R2U.qrCode.create

Cria um QRCode que, quando escaneado, direciona o usuário ao modelo em RA.

const element = document.getElementById('qrCode')
R2U.qrCode.create({ element, sku })