Contenido

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

fill fixed fixed-height flex-item responsive

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