Visualizador 3D

Depois de adicionar a tag de script em seu site, os métodos para criar o Visualizador 3D estarão disponíveis por meio do objeto global R2U.

3D viewer

R2U.viewer.create#

`mobile` `desktop`

É o método para criar o visualizador 3D no site de acordo com a posição do elemento HTML indicado.

//Lembre de substituir pelas informações do seu produto

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

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

Parâmetro popup#

Habilita e desabilita o botão para abrir o visualizador 3D expansível com o modelo.

interface R2U {
  viewer: {
    create: (params: {
      element: HTMLElement
      sku: string
      name?: string
      popup?: boolean
    }) => Promise<void>
  }
}

Exemplo do popup:

popup

Parâmetro progressBarPosition#

Define a posição que o progress bar será inserido.

interface R2U {
  viewer: {
    create: (params: {
      element: HTMLElement
      sku: string
      progressBarPosition?: 'top' | 'middle' | 'bottom'
    }) => Promise<void>
  }
}

Exemplo do progressBarPosition no desktop:

top

middle

bottom

Parâmetro progressBarColor#

Define a cor do progressBarPosition

interface R2U {
  viewer: {
    create: (params: {
      element: HTMLElement
      sku: string
      progressBarColor?: string
    }) => Promise<void>
  }
}

Parâmetro poster#

Define uma imagem sobre o modelo 3D que será exibida durante o carregamento do modelo.

interface R2U {
  viewer: {
    create: (params: { element: HTMLElement; sku: string; poster?: string }) => Promise<void>
  }
}

Mudar sku R2U.viewer.create#

O método setSku atualiza o SKU do produto.

// SKU de teste -- lembre de substituir pelas informações do seu produto
const buttonChangeSku = document.getElementById('button-changeSku')
const changeSku = document.getElementById('viewer-changeSku')

// O create irá retornar um objeto que terá o método setSku
const handler = R2U.viewer.create({
  element: changeSku,
  sku,
  name,
  popup,
  progressBarPosition,
  poster
})
//muda o sku no click do botão
buttonChangeSku.addEventListener('click', () => {
  handler.setSku('RE000002')
})

Exemplo do setSku:

3D viewer setSku

R2U.qrCode.create#

Cria um QRCode que ao scannear direciona o usuário para o modelo em RA.

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

qrcode