Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
ES
English Deutsch Français العربية Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文

amp-3d-gltf

Muestra modelos en 3D en formato GL Transmission Format (gITF).

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

Examples

amp-3d-gltf

Muestra modelos en 3D en formato GL Transmission Format (gITF).

Secuencia de comandos obligatoria <script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>
Diseños admitidos fill, fixed, fixed-height, flex-item y responsive
Ejemplos Consulta el ejemplo de amp-3d-gltf de AMP By Example.

Uso

El componente amp-3d-gltf muestra modelos en 3D que están en formato gITF.

Nota: Para poder mostrar estos modelos, se necesita un navegador compatible con WebGL.

Ejemplo 

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

Limitaciones

Actualmente, solo funciona con glTF 2.0.

Funciones no admitidas:

  • cámaras insertadas
  • animación

CORS

amp-3d-gltf hace una solicitud fetch desde el origen https://<random>.ampproject.net, por lo que access-control-allow-origin: *.ampproject.net debe aparecer en el encabezado de respuesta del punto de conexión que se ha definido como src. El comodín es necesario porque el origen tiene un componente de subdominio aleatorio.

Atributos

src [obligatorio] Atributo obligatorio que especifica la URL del archivo gltf.
alpha [opcional] Atributo booleano que especifica si el espacio libre del canvas es transparente. De forma predeterminada, el espacio libre se rellena con color negro. El valor predeterminado es false.
antialiasing [opcional] Atributo booleano que especifica si se debe activar el antialiasing (suavizado). El valor predeterminado es false.
clearColor [opcional] Cadena que debe contener un color CSS válido que se utilizará para rellenar el espacio libre del canvas.
maxPixelRatio [opcional] Valor numérico que especifica el límite superior de la opción de renderizado pixelRatio. El valor predeterminado es window.devicePixelRatio.
autoRotate [opcional] Atributo booleano que especifica si la cámara gira automáticamente alrededor del centro del modelo. El valor predeterminado es false.
enableZoom [opcional] Atributo booleano que especifica si se activa el zoom. El valor predeterminado es true.

Acciones

setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax) Define la rotación del modelo. El orden de rotación es ZYX.
  • x/y/z: número del 0 al 1. Utiliza de forma predeterminada el valor anterior de la rotación del modelo.
  • min/max: ángulo en radianes, define el intervalo objetivo. El valor predeterminado es 0 / pi * 2.
Por ejemplo, setModelRotation(x=0.5, xMin=0, xMax=3.14) cambiará el valor del componente de rotación x a 1.57.

Validación

Consulta las reglas de amp-3d-gltf en la especificación de la herramienta de validación de AMP.

¿Necesitas más ayuda?

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