Realidade aumentada com <model-viewer>

O componente da Web <model-viewer> pode ser usado para visualizar e interagir com modelos 3D na Web. Além disso, ele passa a usar o recurso de realidade aumentada na Web para colocar e interagir com eles.

Quando visualizado em um dispositivo Android compatível com ARCore, um componente <model-viewer> com o atributo ar exibe um botão, conforme mostrado no exemplo a seguir:

Captura de tela do visualizador de modelos

Tocar nesse botão em dispositivos com suporte a ARCore exibe o modelo usando a funcionalidade WebXR do Chrome ou o app Scene Viewer, dependendo do valor do atributo ar-modes.

A aparência do botão RA pode ser personalizada usando slots de componentes da Web. Consulte o <model-viewer> documentation para ver um exemplo. Consulte também Scene Viewer para saber mais sobre como mostrar modelos 3D interativos em RA em um app ou navegador Android.

Começar a usar <model-viewer>

As etapas a seguir mostram como começar a usar o <model-viewer> em qualquer página da Web.

Adicionar a dependência <model-viewer>

Da CDN do unpkg

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

Do npm

npm install @google/model-viewer

Em seguida, adicione <model-viewer> em node_modules/model-viewer/dist/model-viewer.min.js usando seu bundler preferido,

Inclua a tag <model-viewer>

Adicione o componente da Web <model-viewer> ao documento HTML:

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

Configurar a tag <model-viewer>

A exibição do modelo pode ser configurada alterando os atributos na tag <model-viewer>. Essas propriedades expõem opções como movimento da câmera, animações de modelo e informações do ambiente. A documentação do <model-viewer> lista todos os atributos que podem ser definidos. O utilitário Editor de modelos pode gerar uma tag HTML <model-viewer> e configurar propriedades como posição e iluminação da câmera.

Captura de tela do editor de modelos

Compatibilidade de modelo

Os modelos no formato de arquivo gltf e glb são compatíveis com <model-viewer>. Consulte three.js GLTFLoader documentation para ver uma lista de extensões glTF com suporte.

Para garantir que seu modelo será exibido corretamente, verifique seu modelo no Editor de modelos.

Suporte a navegadores e dispositivos

O uso de <model-viewer> para exibir modelos 3D em uma página da Web é compatível com todos os navegadores permanentes. Recomendamos o uso de um polyfill :focus-visible para ocultar os anéis de foco quando o elemento estiver em foco.

Os recursos de RA exigem um dispositivo compatível com ARCore e a instalação do Google Play Services para RA. Para o modo RA do webxr, consulte Suporte ao navegador WebXR. Por padrão, se o WebXR não tiver suporte, o Visualizador de cenas vai ser usado.

Próximas etapas