Skip to main content

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âmetrodescriçãodefault
elementelemento HTML que receberá o visualizador 3D''
skuSKU do produto''
namenome do produtonome do produto na plataforma R2U
popuppermite que o visualizador 3D seja expansível por meio de um botão pop-uptrue
progressBarPositiondefine a posição da barra de progresso ('top', 'middle' or 'bottom')'top'
progressBarColorcor da barra de progresso ('gray', 'rgba(89, 84, 84, 0.6)', '#c5c5c5')null
posterpermite que uma imagem seja exibida enquanto o modelo 3D está carregandonull

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:

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