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