Skip to main content

Realidade Aumentada

Depois de adicionar a tag de script em seu site, os métodos para criar a experiência de Realidade Aumentada estarão disponíveis por meio do objeto global R2U.

R2U.ar.attach#

mobile

O método ar.attach cria um "eventListener" para abrir o visualizador de RA em dispositivos mobile (e.g.: clique de um botão).

// SKU teste -- lembre de usar informação do seu produto
const arButton = document.getElementById('ar-button')
const sku = 'RE000001'
// cria um alerta de dispositivo não compatível
const fallbackOptions = {
//add mensagem no alerta
alertMessage: 'RA não suportada pelo dispositivo',
//abre um visualizador 3D na tela de aviso
fallback: 'viewer'
}
R2U.ar.attach({
element: arButton,
sku,
fallbackOptions
/* resize defaults to `false` */
})

element#

É o elemento que irá ativa experiência de RA através de algum evento.

interface R2U {
ar: {
attach: (params: { element: HTMLElement; sku: string }) => Promise<void>
}
}

SKU#

É o SKU do produto que deseja ver em RA .

interface R2U {
ar: {
attach: (params: { element: HTMLElement; sku: string }) => Promise<void>
}
}

event#

É o evento que ativará experiência de RA.

interface R2U {
ar: {
attach: (params: { element: HTMLElement; sku: string; event?: string }) => Promise<void>
}
}

resize#

Opção para redimensionar modelo 3D em experiência de RA

interface R2U {
ar: {
attach: (params: { element: HTMLElement; sku: string; resize?: boolean }) => Promise<void>
}
}

showInstructions#

Default once

Quando renderizada, dispõe um modal em tela cheia com explicações para posicionamento e manipulação do objeto 3D, antes de carregar a experiência de AR.

valorefeito
onceA tela de instruções será renderizada na primeira interação do usuário com AR
alwaysA tela de instruções será renderizada em todas as interações do usuário com AR
neverA tela de instruções não será renderizada
interface R2U {
ar: {
attach: (params: {
element: HTMLElement
sku: string
showInstructions?: 'once' | 'always' | 'never'
}) => Promise<void>
}
}
Exemplo das instruções:

fallbackOptions#

A mensagem do alertMessage pode ser customizada

Mostra uma imagem quando o dispositivo móvel não suporta a experiência de RA. Se as instruções estiver inserida o fallback é visualizado apenas quando clicar no botão de "Veja na sua casa".

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

Demostração da RA no iOS#

Desmonstração da RA no Android#

R2U.ar.getLink#

mobile desktop

É o método retorna a URL para compartilhamento na experiência de RA.

// Lembre de usar informação do seu produto
R2U.ar.getLink('RE000001').then((url) => console.log(url))