Google AMP amp-3d-gltf
Earlier we were not able to embed even images in the webpages but with development of web development, we were able to do so. Now with this flow of development, we are able to even embed a 3D image on the website. The amp-3d-gltf component of Google AMP are able to display 3D models that are in glTF format on our website. It must be noted that you must use a WebGL-capable browser to display 3D models.
Setup: To use this tag you have to import the amp-3d-gltf component in the header.
HTML
< script async custom-element = "amp-3d-gltf" src = "https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js" > </ script > |
Example 1:
HTML
<!doctype html> < html amp> < head > < meta charset = "utf-8" > < link rel = "canonical" href = "https://amp.dev/documentation/examples/components/amp-3d-gltf/index.html" > < meta name = "viewport" content = "width=device-width,minimum-scale=1,initial-scale=1" > < script async src = "https://cdn.ampproject.org/v0.js" > </ script > < title >Google AMP amp-3d-gltf</ title > <!-- Import the `amp-3d-gltf` component in the header --> < script async custom-element = "amp-3d-gltf" src = "https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js" > </ script > < style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both; animation: -amp-start 8s steps(1, end) 0s 1 normal both; } @-webkit-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-moz-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-ms-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-o-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } </ style > < noscript > < style amp-boilerplate> body { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none } </ style > </ noscript > < style amp-custom> h1 { color: green; text-align: center; } </ style > </ head > < body > < h1 > Beginner For Beginner </ h1 > <!-- Embed 3d model via the `src` attribute. --> < amp-3d-gltf layout = "fixed" width = "320" height = "240" src = "https://preview.amp.dev/static/samples/glTF/DamagedHelmet.glb" > </ amp-3d-gltf > </ body > </ html > |
Output:
Attributes:
Sr. No. |
Attribute Name |
Description |
---|---|---|
1. |
src |
This is a mandatory attribute as this specifies the location of the gltf file to be displayed. |
2. |
alpha |
This is an optional attribute and uses to specify the behaviour of the canvas background with boolean values. |
3. |
antialiasing |
It is an optional attribute and uses to enable antialiasing. The default value is false. |
4. |
clearColor |
It is an optional attribute and uses to fill free space on the canvas with a CSS colour. |
5. |
maxPixelRatio |
It is an optional attribute and uses to set an upper limit for the pixelRatio render option. |
6. |
autoRotate |
It is an optional attribute and uses to enable automatic rotation around the model’s centre. |
7. |
enableZoom |
It is an optional attribute and uses to disable or enable zooming in and out of the model. |
Example 2:
HTML
<!doctype html> < html amp> < head > < meta charset = "utf-8" > < link rel = "canonical" href = "https://amp.dev/documentation/examples/components/amp-3d-gltf/index.html" > < meta name = "viewport" content = "width=device-width,minimum-scale=1,initial-scale=1" > < script async src = "https://cdn.ampproject.org/v0.js" > </ script > < title >Google AMP amp-3d-gltf</ title > <!-- Import the `amp-3d-gltf` component in the header --> < script async custom-element = "amp-3d-gltf" src = "https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js" > </ script > < style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both; animation: -amp-start 8s steps(1, end) 0s 1 normal both; } @-webkit-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-moz-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-ms-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-o-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } </ style > < noscript > < style amp-boilerplate> body { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none } </ style > </ noscript > < style amp-custom> h1 { color: green; text-align: center; } </ style > </ head > < body > < h1 > Beginner For Beginner </ h1 > < amp-3d-gltf layout = "fixed" width = "320" height = "240" alpha = "true" antialiasing = "true" autorotate = "true" enablezoom = "false" src = "https://preview.amp.dev/static/samples/glTF/DamagedHelmet.glb" > </ amp-3d-gltf > </ body > </ html > |
Contact Us