Pular para o conteúdo principal

Realidade Aumentada

Após adicionar a tag de script ao seu site, os métodos para criar a experiência de Realidade Aumentada estarão disponíveis através do objeto global R2U.

AR

R2U.ar.attach

mobile

O método ar.attach anexa um listener de evento para abrir a experiência de RA em dispositivos móveis (por exemplo: com um clique de botão). Ele rastreará automaticamente os cliques em botões para fins de analytics.

// SKU teste -- lembre de usar as informações do seu produto
const arButton = document.getElementById('ar-button')
const sku = 'RE000001'
// cria um alerta para dispositivos não suportados
const fallbackOptions = {
//adiciona a mensagem de alerta
alertMessage: 'AR não suportado por esse device',
//abre um visualizador 3D em uma tela de aviso
fallback: 'viewer'
}

R2U.ar.attach({
element: arButton,
sku: sku,
fallbackOptions: fallbackOptions
/* resize faz default para `false` */
})
parâmetrodescriçãodefault
elementelemento que inicia a experiência em RAnull
skuSKU do produto''
pricePreço do produto''
eventevento que inicia o AR'click'
resizeOpção para redimensionar o modelo 3D na experience RAfalse
showInstructionsQuando true, mostra uma imagem em tela cheia explicando como colocar e manipular o objeto 3D em realidade aumentada antes de entrar na experiência da câmerafalse
fallbackOptionsComportamento a ser produzido quando a experiência de RA não estiver disponível no dispositivo{ alertMessage }*
fallbackOptions.alertMessageQuando definido, alerta o usuário com a string escolhidanull
fallbackOptions.fallbackQuando definido, abre um visualizador 3D em uma tela de aviso ('viewer') ou em tela cheia (' full')null
fallbackOptions.textQuando definido, modifica o texto de fallback no modo 'viewer'null
fallbackOptions.text.titleMuda o título na página fallbacknull
fallbackOptions.text.topAltera o texto principal na página de fallbacknull
fallbackOptions.text.bottomAltera o texto inferior na página de fallbacknull
callToActionQuando definido, inclui um call to action dentro da experiência de RA, como um botão Adicionar ao carrinhonull
callToAction.textBotão de Call To Action textnull
callToAction.onClickFunção a ser executada no clique do botão dentro da experiência de ARnull

* alertMessage = 'Sentimos muito, mas infelizmente seu dispositivo não é compatível com a visualização em Realidade Aumentada'

showInstructions

Default once

Quando renderizado, mostra um painel de tela cheia explicando como posicionar e manipular um objeto 3D, antes de prosseguir para a experiência de RA.

valorefeito
onceA tela de instruções será renderizada apenas na primeira experiência de RA do usuário.
alwaysA tela de instruções será renderizada sempre que o usuário interagir com o botão
neverA tela de instruções nunca será renderizada
interface R2U {
ar: {
attach: (params: {
element: HTMLElement
sku: string
showInstructions?: 'once' | 'always' | 'never'
}) => Promise<void>
}
}
Exemplo de Instructions:

Tela de instruções

fallbackOptions

A alertMessage pode ser personalizada

Mostra uma imagem quando o dispositivo móvel não é compatível com a experiência de RA. Se o parâmetro de instruções for fornecido, o fallback será exibido apenas quando o usuário clicar no botão que foi attach.

interface R2U {
ar: {
attach: (params: {
element: HTMLElement
sku: string
// aviso de dispositivo não compatível com AR
fallbackOptions?: {
// adicionar mensagem de alerta
alertMessage?: string
// abre um visualizador 3D na tela de aviso
fallback?: 'viewer' | 'full'
// altera a mensagem de fallback
text?: {
// altera o título da página
title?: string
// muda o texto superior da página
top?: string
// alterar o texto da página inferior
bottom?: string
}
}
}) => Promise<void>
}
}
Examplo de fallback:

Fallback

callToAction

Atualmente apenas disponível no iOS Safari e Android WebXR
Recomenda-se que o parâmetro text seja curto para não competir em espaço do nome do produto

Mostra um call to action na experiência de Realidade Aumentada, como um botão Adicionar ao carrinho. A função onClick fornecida será disparada quando o usuário interagir com o CTA.

interface R2U {
ar: {
attach: (params: {
element: HTMLElement
sku: string
callToAction?: {
text: string
onClick: () => void
}
}) => Promise<void>
}
}
Exemplo de Call To Action:

Call To Action

Demo de RA no iOS

iOS 1iOS 2iOS 3

Demo de RA no Android

Android 1Android 2Android 3

mobile desktop

O método retorna um URL compartilhável para a experiência de AR.

// lembre-se de usar as informações do seu produto
R2U.ar.getLink('RE000001').then((url) => console.log(url))