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