Trabalhar com o componente Sites 3D

AEM 3D inclui um componente AEM Sites que pode ser usado para implementar a visualização interativa de modelos 3D em páginas da Web.

Depois de ter adicionado seu componente 3D, você pode visualizar o ativo 3D nesse componente.

Adicionar o componente 3D ao modelo de página

Você deve ativar o componente 3D na página antes de colocá-lo em uma página. Consulte Edição de modelos para obter informações detalhadas sobre como ativar componentes em modelos.

Adicionar o componente 3D ao modelo de página:

  1. Navegue até Ferramentas > Geral > Modelos.

  2. Navegue até o modelo de página no qual você deseja ativar o componente 3D e selecione o modelo.

  3. Toque em Editar para abrir o modelo.

  4. Próximo ao canto superior direito da página, no menu suspenso, selecione o modo Estrutura, se ele ainda não estiver ativo.

    image2017-11-14_15-33-57

  5. Toque na região Contêiner de layout para selecioná-lo.

  6. Toque no botão Policy para abrir o Policy Editor.

  7. Na seção Properties, selecione a marca de seleção 3D e toque em Concluído para salvar as alterações e fechar o Editor de Políticas.

    Agora é possível colocar o componente Sites 3D em todas as páginas que usam esse modelo.

Adicionar o componente visualizador 3D a uma página da Web

CUIDADO

Essa versão do AEM 3D suporta apenas uma instância do componente 3D em cada página da Web. Vários componentes 3D na mesma página não funcionam corretamente.

Para adicionar o componente visualizador 3D a uma página da Web:

  1. Abra o AEM Sites e selecione a página da Web à qual deseja adicionar o componente 3D.

  2. Toque no ícone Editar (lápis) para abrir a página no editor de páginas. Verifique se o modo Edit próximo à parte superior direita da página está selecionado.

    image2017-11-14_15-44-40

  3. Toque no seletor do painel para abrir o painel lateral.

  4. Toque no ícone de sinal de mais para abrir a lista Componentes.

  5. Arraste o componente 3D Viewer da lista Components para o local na página onde deseja que o visualizador 3D apareça.

Configurar o componente 3D

  1. No editor de páginas do AEM Sites, selecione o componente Visualizador 3D que você adicionou anteriormente à página.

  2. Toque no ícone Configuração (chave) para abrir a caixa de diálogo de configuração do componente.

    É possível definir as seguintes propriedades de componentes:

    Propriedade Descrição Aplicabilidade
    Altura (px) Especifique a altura desejada do componente 3D em pixels. Se deixado em branco, o padrão será 600 pixels.
    Nome do palco

    Selecione um Estágio 3D na lista de estágios disponíveis. O palco fornece fundo e iluminação.

    Consulte Sobre o uso de palcos AEM Sites 3D.

    Ignorado para ativos do Adobe Dimension.
    Velocidade de rotação automática (RPM)

    O visualizador 3D orbita a câmera continuamente após carregar e redefinir. A rotação automática termina quando o usuário inicia uma ação de órbita manual.

    Você pode especificar a velocidade de rotação em RPM usando os seguintes valores:

    • Definir um valor positivo para girar à direita
    • Definir um valor negativo para girar para a esquerda
    • Defina um valor 0 para desativar a rotação automática.

    O padrão é 3 RPM, o equivalente a 20 segundos por revolução completa.

    Observação: a velocidade de rotação assume uma taxa de quadros de 60/s. Normalmente, essa taxa é alcançada com modelos pequenos a moderadamente em hardware gráfico mais potente. Modelos maiores ou dispositivos mais lentos giram automaticamente em taxas mais baixas.

    Ignorado para ativos do Adobe Dimension.
    Cor do botão de navegação Use o seletor de cores para escolher a cor primária para os botões de controle do visualizador. Ignorado para ativos do Adobe Dimension.
    Cor do focalizador da navegação Use o seletor de cores para escolher a cor de focalização/selecionada para os botões de controle do visualizador. Ignorado para ativos do Adobe Dimension.
    Mostrar amostras Para uso futuro. Ignorado para ativos do Adobe Dimension.
    Mostrar predefinições da câmera GLTF Mostre ou oculte as predefinições da câmera que podem estar presentes nos ativos do Adobe Dimension. Somente para ativos Adobe Dimension.
    Cor do fundo GLTF Cor de plano de fundo padrão se o modelo 3D não incluir um plano de fundo. Somente para ativos Adobe Dimension.
  3. Toque na marca de seleção para salvar as alterações.

    Além das configurações disponíveis na caixa de diálogo de configuração do componente, há várias configurações globais disponíveis que podem ser modificadas por meio do CRXDE Lite.
    Consulte Configurações avançadas para obter informações detalhadas sobre essas configurações globais.

Atribuir um modelo 3D ao componente

  1. No editor de páginas do AEM Sites, clique no ícone Assets para abrir a lista Ativos no painel lateral.

  2. Selecione o filtro Modelos 3D para ocultar tipos de ativos indesejados.

    screen_shot_2017-12-11at124258

  3. Procure ou role até o ativo 3D que deseja visualizar na página que está sendo editada.

  4. Arraste o ativo 3D da lista Assets para o componente Visualizador 3D colocado anteriormente na página.

    Os ativos Adobe Dimension são renderizados usando a nova tecnologia de visualizador baseada no padrão aberto glTF, enquanto todos os outros tipos de ativos 3D dependem do visualizador webGL clássico AEM 3D. O componente seleciona automaticamente o visualizador apropriado com base no tipo de modelo 3D.

Visualização de uma página da Web que tenha um componente 3D

Embora a página da Web esteja no modo Edit, o componente 3D exibe o modelo 3D, mas nenhuma interação com o modelo é possível.

Você pode visualizar a página da Web no editor de páginas com acesso total à funcionalidade do componente 3D.

Consulte também Visualização de ativos 3D no componente 3D do Sites.

Para visualizar uma página da Web que tenha um componente 3D:

  1. Siga um destes procedimentos:

    • Próximo ao canto superior direito da página, clique em Preview para entrar no modo de visualização.
    • Exclua /edit.html do URL da página no navegador.

Publicar a página e os ativos

Consulte Publicação de ativos para obter informações sobre como publicar ativos. Consulte Publicação de páginas para obter informações sobre como publicar páginas.

OBSERVAÇÃO

Usar o item de menu Publicar página no menu Informações da página publicará a página e todas as dependências de página primárias. As dependências secundárias que podem ser referenciadas pelo modelo 3D e/ou pelo estágio 3D, como mapas de textura e imagens IBL, não são publicadas quando você publica a página dessa maneira.

O Adobe recomenda que você publique todos os ativos 3D e suas dependências diretamente do AEM Assets, antes de publicar a página da Web que faz referência a esses ativos.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now