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
- Abra o painel Componentes e a pasta Gráficos e efeitos.
- Arraste o componente Visualizador de modelos 3D para o cenário.
- 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.
- 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.
|
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.
|
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:
|
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.
|
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.
|
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.
|
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.
|
Campo de visão |
É o campo de visão vertical da câmera.
|
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.
|
Limites do zoom da câmera |
|
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.
|
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.
|
Estilos do card de informação |
Defina as cores para personalizar a aparência do card de informação.
|
Eventos e ações
EventosUse 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.
É 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. |
|
Definir guinada desejada | Gira suavemente o modelo até a guinada especificada. |
|
Definir verticalidade desejada | Gira suavemente o modelo até a verticalidade especificada (rotação no eixo longitudinal). |
|
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á. |
|
Definir zoom desejado | Aplica zoom suavemente até o nível especificado. |
|
Incrementar zoom desejado | Incrementa o zoom desejado (em metros). |
|
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. |
|
Definir a movimentação local desejada | Desloca a câmera suavemente para uma nova posição. |
|
Definir cor do material | Define a cor do material. |
|
Exibir animação | Exibe a animação especificada. |
|
Pausar animação | Pausa a animação especificada. |
|
Definir tempo da animação | Procura o tempo especificado durante uma animação. |
|
Ao selecionar uma dessas ações na caixa de diálogo "Evento", defina o componente "Visualizador de modelos 3D" como destino.
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.