AMP
ES
English Deutsch Français العربية Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

amp-3d-gltf

Description

Muestra modelos en 3D en 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

Ejemplos

amp-3d-gltf

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

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 glTF.

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.

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow
¿Encontró un error o considera que falta una función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Ir a GitHub