26 de abril de 2022

O guia completo de incorporação 3D na web e como a usar

Uma análise detalhada sobre o que é a incorporação 3D WebAR e como a usar.

Uma das principais funcionalidades do Vectary é a incorporação de AR na web. Apresentamos uma análise detalhada sobre o que é a incorporação 3D de WebAR e como a podes usar para alcançares os teus objetivos de negócio.

Mesmo que não domines nenhuma linguagem de programação, a incorporação web pode ainda não fazer parte do teu vocabulário, mas isso está prestes a mudar. Uma incorporação web, ou ficheiro incorporado, é qualquer tipo de conteúdo multimédia que podes simplesmente inserir no teu website ao colares um trecho de código HTML ou um script.

Quer queiras tornar o teu artigo do blogue mais interessante, adicionar um elemento interativo ao teu website, permitir que os teus clientes experimentem produtos em AR ou destacar parte de um artigo com um elemento de design de redes sociais populares, esta opção pode trazer muito valor ao teu website e aos clientes que o visitam.

Hoje em dia, os utilizadores da internet deparam-se com incorporações web todos os dias. Estas surgem sob a forma de publicações nas redes sociais, em websites de notícias e de media, entre muitos outros. O YouTube é, provavelmente, uma das incorporações mais conhecidas. Se quiseres incluir um vídeo no teu artigo do blogue, na maioria das vezes, trata-se de um trecho de código que se encontra abaixo de qualquer vídeo do YouTube e que foi simplesmente copiado e colado. Os projetos 3D também estão a caminhar nesta direção.

Um exemplo de incorporação 3D e AR na web

A imagem abaixo é um visualizador 3D interativo do Vectary — chama-se WebAR porque suporta tanto o elemento web 3D como a experiência de Realidade Aumentada. Experimenta rodá-lo ou clica no ícone de AR para o veres em Realidade Aumentada:

Como preparar uma incorporação de WebAR no Vectary

Passo 1: Cria um objeto 3D ou uma cena 3D

Para incorporares um objeto num blogue ou website, precisas de planear onde pretendes que o objeto incorporado apareça. Com base nisso, podes preparar a incorporação para que se enquadre naturalmente no website. Existem várias formas de criares um projeto 3D otimizado para a web.

Importa o teu próprio modelo 3D

Se já tens experiência em modelação 3D, provavelmente já terás alguns modelos e ficheiros para começares a tua incorporação 3D na web. Basta importá-los para o Vectary e esperar que carreguem. Atualmente, suportamos mais de 60 formatos de ficheiro, incluindo: .obj, .dae, .stl, .gltf, .glb, .jpg, .png, .svg. Podes consultar a lista completa de todos os formatos suportados aqui.

Usa a biblioteca e acede a repositórios 3D ou coleções prontas a usar

Para principiantes em modelação 3D, criámos um conjunto de coleções selecionadas compostas por recursos, materiais e ambientes. Assim que o encontrares, arrasta-o e solta-o na cena e continua para gerares a incorporação.

Cria um projeto do zero

Para utilizadores avançados, o Vectary oferece modelação de malhas intuitiva no modo Edit. À semelhança da importação de projetos, podes criá-lo do zero ou editar um existente que tenhas importado ou colocado na cena a partir da biblioteca. Quando terminares a modelação 3D, continua para gerares o teu código de incorporação.

Passo 2: Como gerar um código de incorporação 3D para a web

Assim que estiveres pronto e tiveres o teu projeto e objeto 3D preparados, criar um código de incorporação de WebAR é extremamente simples e direto. O nosso software faz todo o trabalho por ti com um simples clique no botão Share e ao ativares a opção Share to web. Depois de concluído, é gerado um código iframe que está pronto a ser usado no teu código HTML.

Definições de incorporação 3D na web do Vectary

Tens a opção de personalizar o resultado da tua incorporação no menu avançado:

Qualidade da textura

O parâmetro mais importante que afeta a incorporação é a qualidade da textura. As texturas mais detalhadas demoram mais tempo a ser geradas, por serem muito detalhadas. Podem também apresentar um desempenho mais lento quando implementadas no website. Por outro lado, as texturas com menor resolução são mais rápidas de carregar. Podes diminuir individualmente a qualidade de cada textura usada nos teus materiais.

Realidade aumentada

Adiciona Realidade Aumentada a partir do menu Advanced no painel de propriedades do projeto no Vectary Studio. Os ficheiros necessários para diferentes plataformas (Android, iOS) são gerados automaticamente em segundo plano.

Centrar vista da câmara

Para centrar a câmara no teu objeto principal, primeiro certifica-te de que entraste na câmara (indicado com o ícone “+” ao lado do nome da câmara). Depois, clica no objeto (ou grupo de objetos) e clica no ícone fit view na barra de ferramentas inferior (tecla de atalho “a”). Isto centrará o ponto de articulação da câmara nos objetos selecionados (se nada estiver selecionado, centrará a câmara no meio da cena). Usa o scroll para aproximar/afastar, arrastar e rodar para ajustares a tua vista.

Vista de câmara limitada

Adiciona uma câmara da barra de ferramentas à tua cena. Como podes ter várias câmaras no teu projeto, precisas de “entrar” na câmara para usares efetivamente as definições da câmara no projeto partilhado. Seleciona a tua câmara e modifica as definições no painel de propriedades à direita. Ativa a opção View Limits (botão de alternância) para restringir os ângulos de visualização, o deslocamento e o zoom. Clica em Preview para experimentares as tuas novas definições. Para centrar a câmara no teu objeto principal, primeiro certifica-te de que entraste na câmara (indicado com o ícone “+” ao lado do nome da câmara). Depois, clica no objeto (ou grupo de objetos) e clica no ícone fit view na barra de ferramentas inferior (tecla de atalho “a”). Isto centrará o ponto de articulação da câmara nos objetos selecionados (se nada estiver selecionado, centrará a câmara no meio da cena). Usa o scroll para aproximar/afastar, arrastar e rodar para ajustares a tua vista.

Efeitos (apenas web)

Se tiveres a opção Ground plane ligada ou uma luz que projete sombras, podes querer adicionar Soft Shadows a partir da lista de efeitos. Outro efeito semelhante que confere sombras/profundidade aos teus objetos 3D é o Ambient Occlusion, que é calculado em tempo real, tal como o Reflections

Passo 3: Pré-visualizar a incorporação de WebAR

Por vezes, é útil pré-visualizar o teu visualizador de WebAR antes de o incorporares, ou podes apenas querer partilhar a pré-visualização de Realidade Aumentada com os teus colegas e clientes. Acede a Share, clica em Share to web, copia a ligação direta e abre-a num novo separador.

Passo 4: Coloca a incorporação web no código do teu website

Basta copiares e colares a incorporação web no teu site a partir da secção Share. O princípio é o mesmo do código de incorporação do YouTube. Também podes incorporar ficheiros em serviços como o Squarespace, Wix, Shopify, Weebly, ou plataformas semelhantes.

https://www.vectary.com/uploads/media-library/embeding.jpg-0u5XFVh92xgWzs0qWjbuvb.jpeg

Como editar o código de incorporação 3D para a web

Os utilizadores familiarizados com código HTML podem editar o código iframe gerado. Para já, apenas os parâmetros básicos, como width, height e border frame, podem ser alterados. No futuro, haverá mais opções de personalização e edição disponíveis no código de incorporação. Estas estarão acessíveis sem precisares de quaisquer conhecimentos de programação. Por isso, por exemplo, se quiseres redimensionar e tornar a tua incorporação mais pequena para que se ajuste perfeitamente ao teu website, altera os atributos “width” e “height” para se adaptarem às tuas necessidades. Recomendamos manter framerborder com o valor “0” para que o objeto se integre perfeitamente no fundo.

Passo 4: Como editar o visualizador 3D no teu website

Os objetos incorporados no website são os resultados finais de designs 3D criados no editor do Vectary. No entanto, o Vectary vai um passo mais além e permite-te editar projetos WebAR já incorporados e alterá-los em tempo real. Abre o projeto no Vectary, faz as tuas alterações e atualiza-o junto às definições de Share to web. Todas as alterações devem ser aplicadas instantaneamente.