Skip to content
Related Articles

Related Articles

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=
</script>


Example 1:

HTML




<!doctype html>
<html amp>
 
<head>
    <meta charset="utf-8">
    <link rel="canonical" href=
 
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
 
    <script async src=
    </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=
    </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=
    </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=
 
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
 
    <script async src=
    </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=
    </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=
    </amp-3d-gltf>
</body>
 
</html>


Output:

This output is for iPhone 6/7/8

My Personal Notes arrow_drop_up
Recommended Articles
Page :