Pular para o conteúdo principal

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.

Visualizador 3D

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

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

Popup example:

popup

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:

3D viewer 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 })

qrcode