Google AMP amp-3d-gltf

Last Updated : 25 Oct, 2020

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>
        Geeks For Geeks
    </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:

This output is for iPhone 6/7/8

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>
        Geeks For Geeks
    </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>

Output:

This output is for iPhone 6/7/8

Suggest improvement

D3.js geoGinzburg4() Function

How to change/update CSS class dynamically using amp-bind in Google AMP ?

Share your thoughts in the comments

Google AMP amp-3d-gltf

HTML

Example 1:

HTML

Output:

Attributes:

Example 2:

HTML

Output:

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?