O componente "Visualizador de modelos 3D" e o Editor 3D

Esse componente não é compatível com o Google Ads, a Google AdMob, os anúncios HTML para AMP, os anúncios em vídeo nem com os anúncios gráficos.

O componente "Visualizador de modelos 3D" permite incorporar ao anúncio um modelo 3D no formato GLB que o usuário pode girar, movimentar ou ampliar com zoom. Também é possível configurar o modelo no Editor 3D do Google Web Designer.

3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer

Compatibilidade do navegador

O Microsoft Edge não é compatível com o componente "Visualizador de modelos 3D".

Como adicionar o componente "Visualizador de modelos 3D" ao projeto

1. Abra o painel Componentes e a pasta Gráficos e efeitos.
2. Arraste o componente Visualizador de modelos 3D para o cenário.
3. Na seção Visualizador de modelos 3D do painel Propriedades, insira o arquivo GLB que você quer usar como Origem. Clique no botão Procurar para selecionar um arquivo do sistema.
4. Clique duas vezes sobre o componente no cenário para abrir a caixa de diálogo Editor 3D e configurar o modelo. Quando terminar, clique em Salvar.

É possível ajustar as preferências do Google Web Designer (Editar > Preferências... > Componentes) para criar um componente "Visualizador de modelos 3D" automaticamente quando você arrastar um arquivo GLB para o cenário.

Propriedades

Estas definições do componente ficam no painel "Propriedades". É necessário sair do Editor 3D.

Propriedade	Descrição
Nome	É o nome do componente "Visualizador de modelos 3D".
Origem	É o arquivo GLB de origem do recurso 3D. O arquivo precisa ter até 3 MB. Consulte o Guia de recursos 3D para ver diretrizes adicionais e use o Khronos glTF Validator para garantir que o arquivo GLB seja válido.

Propriedades avançadas

Propriedade	Descrição
Ícone da dica de gesto	É a imagem a ser exibida sobre o modelo 3D para solicitar ao usuário que interaja com ele. A dica de gesto se move levemente para chamar a atenção do usuário até que o limite de animação seja atingido e desaparece quando o usuário começa a interagir com o modelo. Pode ser vinculado a dados dinâmicos.
Texto da dica de gesto	É o texto a ser exibido no ícone da dica de gesto. Só se aplica se um ícone de dica de gesto for especificado. Pode ser vinculado a dados dinâmicos.
Definir limite da animação	Marque essa caixa para definir uma duração em segundos e limitar a duração da animação da dica de gesto. Pode ser vinculado a dados dinâmicos.

Editor 3D

Para abrir a caixa de diálogo do Editor 3D, faça o seguinte:

• Clique duas vezes no componente "Visualizador de modelos 3D" no cenário.

Uma visualização do modelo 3D que pode ser girada e ampliada será exibida. Também é possível interagir com todos os pontos de acesso.

Use o painel à direita para configurar o modelo. As configurações são organizadas em duas guias principais: GLB e Componente.

Guia "GLB"

As mudanças feitas na guia GLB são salvas no arquivo de origem do modelo na pasta de recursos. Isso inclui quaisquer arquivos de imagem usados como texturas, que serão agrupados no arquivo GLB. É possível definir as preferências do Google Web Designer para excluir automaticamente as texturas não usadas.

Informações do GLB
Origem	É o arquivo GLB de origem do modelo 3D. Este campo é somente leitura. Para mudar o arquivo de origem, saia da caixa de diálogo do Editor 3D e edite a propriedade Origem do componente no painel Propriedades.
Detalhes	Tamanho: é o tamanho do arquivo de origem.
Materiais
Materiais	Só é possível configurar um material por vez. Selecionados: todos os materiais usados no modelo 3D são listados nesse menu suspenso. Selecione o material que você quer visualizar ou editar.
Cor base	É a cor inicial e a textura que serão usadas nesse material.
Metálica / Aspereza	As propriedades "Metálica" e "Aspereza" determinam como a luz reflete no material. Textura: selecione uma textura para indicar quais partes do material são metálicas. Metálica: um valor entre 0 e 1 indica o quanto o material é metálico. Materiais mais metálicos refletem mais o ambiente. Aspereza: um valor entre 0 e 1 indica o quanto o material é fosco, o que influencia a nitidez dos reflexos. O valor 0 é totalmente reflexivo, enquanto 1 é totalmente fosco.
Mapa normal	Selecione uma textura para adicionar saliências e detalhes da superfície ao material.
Emissiva	Selecione uma cor e uma textura para representar o brilho do material.
Oclusão	Selecione uma textura para representar sombras da iluminação ambiente.
Outro	Defina outras opções para o material, como as seguintes: Dois lados: marque esta caixa de seleção para que este material tenha dois lados. Mesclagem alfa: selecione como os valores alfa (transparência) das texturas serão tratados: Opaco: os valores alfa são ignorados e a textura é sempre totalmente opaca. Mesclagem: os valores alfa entre 0 e 1 são translúcidos. Máscara: cada parte da textura é totalmente opaca ou totalmente transparente, dependendo de como o valor alfa dela se compara ao valor especificado em Limite alfa. Valores alfa maiores que o limite são tratados como opacos.

Guia "Componente"

As mudanças feitas na guia Componente aparecem no componente "Visualizador de modelos 3D", não no arquivo GLB de origem subjacente.

Arquivos HDR

Os arquivos de imagem HDR (High Dynamic Range) podem ser usados para a iluminação ambiental e de fundo do componente "Visualizador de modelos 3D". Cada arquivo HDR precisa ter menos de 150 KB. Recomendamos redimensionar arquivos HDR grandes para 256 x 128 para se ajustar a esse limite.

Apresentação
Contexto	Imagem: selecione uma imagem ou um ambiente (um arquivo HDR) para usar como segundo plano. Pode ser vinculado a dados dinâmicos.
Iluminação ambiental (HDR)	É possível usar a iluminação baseada em imagem para fornecer uma iluminação detalhada baseada em um ambiente real. Imagem: use uma imagem esférica no formato HDR. Pode ser vinculado a dados dinâmicos. Exposição: é o nível de exposição da iluminação. Intensidade da sombra: é a opacidade das sombras. Suavização da sombra: é o desfoque de sombras.
Animações	Se o arquivo GLB de origem incluir animações, é possível definir uma animação para ser exibida automaticamente. No momento, o Editor 3D não é compatível com a criação de animações. Padrão: selecione uma animação existente para usar como padrão. Reprodução automática: marque esta caixa de seleção para começar a exibir a animação padrão quando o componente for carregado. Definir limite da animação: marque esta caixa de seleção e insira o número de segundos da animação a serem exibidos antes de ela pausar automaticamente.
Câmera
Visualização inicial da câmera	Estas opções determinam as configurações da câmera quando o componente é carregado. Qualquer limite de rotação e de zoom da câmera definido abaixo será aplicado. Guinada: é a rotação da câmera em torno de um eixo vertical, em graus. Inclinação: é a rotação da câmera em torno de um eixo horizontal, em graus. Zoom: é a proximidade da câmera ao modelo. Usar a visualização atual como a inicial: clique neste botão se você ajustou a câmera na caixa de diálogo de visualização do Editor 3D e quiser usar esse ajuste como a visualização inicial.
Eixo da órbita	O eixo da órbita é o ponto no espaço 3D em que a câmera gira. Por padrão, ele é definido como o centro do modelo 3D. X: é a posição x do eixo da órbita. Y: é a posição y do eixo da órbita. Z: é a posição z do eixo da órbita. Redefinir: restaura as coordenadas padrão do eixo da órbita.
Campo de visão	É o campo de visão vertical da câmera. Ângulo: é um ângulo entre 1° e 179°.
Limites da rotação da câmera	Se você quiser restringir a distância que os usuários podem girar o modelo, marque a caixa de seleção Guinada ou Inclinação e defina os ângulos mínimo e máximo. Guinada (lado a lado): é a distância que a câmera pode girar em torno de um eixo vertical. Inclinação (para cima e para baixo): é a distância que a câmera pode girar em torno de um eixo horizontal.
Limites do zoom da câmera	Tipo: escolha se você quer restringir a capacidade do usuário de dar zoom: Distância da câmera ilimitada: sem restrições. Esta é a seleção padrão. Distância da câmera limitada: defina um intervalo mínimo e máximo de distância. O nível de zoom Mín. precisa ser definido como um valor inferior ao nível de zoom Máx.. Distância da câmera fixa: o usuário não pode mudar o zoom. Os níveis de zoom Mín. e Máx. precisam ser definidos como o mesmo valor.
Pontos de acesso
Pontos de acesso	Os pontos de acesso são pontos no modelo 3D com que os usuários podem interagir. É possível exibir cards de informação ou configurar eventos que respondam a cliques em pontos de acesso. Adicionar ponto de acesso: crie um ponto de acesso. Depois de selecionar esse botão, clique no ponto do modelo 3D onde você quer defini-lo. É possível personalizar o ponto de acesso nos campos a seguir. Nome: é o nome do ponto de acesso. Clique no ícone Excluir ao lado do nome de um ponto de acesso para excluí-lo. Card de informação: determina se o clique no ponto de acesso invoca um card de informação: Nenhum: nenhum card de informações é invocado. Card de informação: um card de informação é invocado. Título: é o título exibido no card de informação. Pode ser vinculado a dados dinâmicos. Descrição: é o texto exibido no card de informação. Pode ser vinculado a dados dinâmicos.
Imagem	É possível personalizar a aparência dos pontos de acesso. Para isso, especifique imagens para diferentes estados. Todos os pontos de acesso usam o mesmo conjunto de imagens. Para cima: é a imagem padrão usada quando o usuário não estiver interagindo com o ponto de acesso. Para baixo: é a imagem usada quando o usuário clica em um ponto de acesso. Acima de: é a imagem usada quando o cursor do usuário passa sobre um ponto de acesso. Tamanho: é a largura e a altura do ponto de acesso.
Estilos do card de informação	Defina as cores para personalizar a aparência do card de informação. Cor da fonte: é a cor do título e do texto do card de informação. Cor do plano de fundo: é a cor do plano de fundo do card de informação. Cor da borda: é a cor da borda do card de informação.

Eventos e ações

Eventos

Use eventos para ativar outras ações no anúncio. O componente "Visualizador de modelos 3D" envia os seguintes eventos:

Evento	Descrição
Cena 3D renderizada	Enviado depois que a cena do modelo tridimensional é renderizada pela primeira vez.
Câmera alterada	Enviado quando uma das propriedades da câmera tridimensional é alterada. Se o usuário ajustar a câmera, o objeto event.detail conterá a propriedade source: user-interaction.
Ponto de acesso clicado	Enviado quando o usuário clica em um ponto de acesso definido no Editor 3D. O objeto event.detail contém o nome do ponto de acesso clicado, o índice dele na lista de pontos da cena e as coordenadas X e Y da tela do ponto de acesso.
Interação iniciada	Enviado quando o usuário começa a interagir com o modelo tridimensional.
Interação finalizada	Enviado quando o usuário termina de interagir com o modelo tridimensional.

Para selecionar um desses itens na caixa de diálogo "Evento", defina o componente "Visualizador de modelos 3D" como destino.

Ações

É possível acionar as seguintes ações do componente "Visualizador de modelos 3D" em resposta a outros eventos:

Evento	Descrição	Opções de configuração
Definir guinada	Altera o modelo para a guinada especificada (rotação em torno do eixo vertical) e pausa a animação.	Guinada: é o ângulo de guinada em graus.
Definir guinada desejada	Gira suavemente o modelo até a guinada especificada.	Guinada desejada: é o ângulo da guinada em graus, entre -360 e 360.
Definir verticalidade desejada	Gira suavemente o modelo até a verticalidade especificada (rotação no eixo longitudinal).	Verticalidade desejada: é o ângulo da verticalidade em graus.
Incrementar verticalidade desejada	Gira suavemente o modelo até a verticalidade desejada de acordo com o valor especificado. Se o modelo já tiver atingido a verticalidade desejada, nada acontecerá.	Delta da verticalidade: é o ângulo em graus a ser adicionado à verticalidade atual.
Definir zoom desejado	Aplica zoom suavemente até o nível especificado.	Zoom desejado: é o nível de zoom em metros.
Incrementar zoom desejado	Incrementa o zoom desejado (em metros).	Delta do zoom: use um valor negativo para aumentar o zoom.
Definir pivô desejado	Altera o ponto em torno de onde ocorre a rotação e move a câmera suavemente até que ela possa orbitá-lo.	Pivô x desejado: é a posição x (em metros). Pivô y desejado: é a posição y (em metros). Pivô z desejado: é a posição z (em metros).
Definir a movimentação local desejada	Desloca a câmera suavemente para uma nova posição.	Movimentação local x desejada: é definida em metros. Movimentação local y desejada: é definida em metros.
Definir cor do material	Define a cor do material.	Nome do material Vermelho: é o valor de vermelho da nova cor (entre 0 e 1). Verde: é o valor de verde da nova cor (entre 0 e 1). Azul: é o valor de azul da nova cor (entre 0 e 1).
Exibir animação	Exibe a animação especificada.	Nome da animação
Pausar animação	Pausa a animação especificada.	Nome da animação
Definir tempo da animação	Procura o tempo especificado durante uma animação.	Nome da animação Tempo de animação: é o tempo a ser procurado (em segundos).

Ao selecionar uma dessas ações na caixa de diálogo "Evento", defina o componente "Visualizador de modelos 3D" como destino.

Métodos avançados da API

Um método adicional está disponível com o uso de código personalizado.

getCameraDetails()

Ele retorna um objeto com detalhes sobre as configurações atuais da câmera.

As propriedades desse objeto são as seguintes:

• yaw: é a rotação em torno do eixo vertical, em graus.
• pitch: é a rotação em torno do eixo horizontal, em graus.
• zoom: é o nível do zoom, em metros.
• x: é a posição x em torno de onde a câmera orbita, em metros.
• y: é a posição y em torno de onde a câmera orbita, em metros.
• z: é a posição z em torno de onde a câmera orbita, em metros.

Usuários avançados também podem consultar a documentação em https://modelviewer.dev.

Visualizar

Só é possível visualizar o componente "Visualizador de modelos 3D" no Editor 3D ou no navegador. Para isso, clique no botão Visualizar no canto superior direito.