Índice

Important: this documentation is not applicable to your currently selected format ads!

amp-3d-gltf

Description

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

Required Scripts

<script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>

Supported Layouts

fill fixed fixed-height flex-item responsive

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

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íveis	fill, fixed, fixed-height, flex-item, responsive
Exemplos	Consulte 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 glTF.

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?

Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.

Ir para o Stack Overflow

Encontrou um bug ou sente falta de um recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Ir para o GitHub