AMP

amp-3d-gltf

Exibe modelos 3D no formato GL Transmission Format (gITF).

Script obrigatório<script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>
Layouts compatíveisfill, fixed, fixed-height, flex-item, responsive
ExemplosConsulte um exemplo de amp-3d-gltf no site AMP By Example.

Uso

O componente amp-3d-gltf exibe modelos 3D que estão no formato gITF.

Observação: um navegador compatível com WebGL é necessário para que esses modelos sejam exibidos.

Exemplo

<amp-3d-gltf
    layout="responsive"
    width="320"
    height="240"
    alpha="true"
    antialiasing="true"
    src="path/to/model.glb"></amp-3d-gltf>

Limitações

Atualmente, só funciona com o glTF 2.0.

Recursos não compatíveis:

  • Câmeras incorporadas
  • Animação

CORS

O amp-3d-gltf faz uma solicitação fetch a partir da origem https://<random>.ampproject.net, então access-control-allow-origin: *.ampproject.net precisa ser definido no cabeçalho de resposta do endpoint especificado como src. O caractere curinga é necessário, porque a origem tem um componente de subdomínio aleatório.

Atributos

src [obrigatório]Um atributo obrigatório que especifica o URL para o arquivo gltf.
alpha [opcional]Um atributo booleano que especifica se o espaço livre na tela é transparente. Por padrão, o espaço livre é preenchido com a cor preta. O valor padrão é false.
antialiasing [opcional]Um atributo booleano que especifica se o anti-aliasing é ativado ou não. O valor padrão é false.
clearColor [opcional]Uma string que precisa conter uma cor CSS válida, que será usada para preencher o espaço livre na tela.
maxPixelRatio [opcional]Um valor numérico que especifica o limite superior para a opção de renderização pixelRatio. O padrão é window.devicePixelRatio.
autoRotate [opcional]Um atributo booleano que especifica se a câmera deve girar automaticamente ao redor do centro do modelo ou não. O valor padrão é false.
enableZoom [opcional]Um atributo booleano que especifica se o zoom deve ser ativado ou não. O valor padrão é true.

Ações

setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax)Define a rotação do modelo. A ordem de rotação é ZYX.
  • x/y/z: número 0..1, o padrão é o valor anterior da rotação do modelo.
  • min/max: ângulo em radianos, o padrão é 0 / pi * 2, define o intervalo desejado.
Por exemplo, setModelRotation(x=0.5, xMin=0, xMax=3.14) altera o componente x da rotação para 1.57.

Validação

Consulte as regras do amp-3d-gltf (link em inglês) na especificação do validador de AMP.

Precisa de mais ajuda?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub