Google AMP amp-3d-gltf

Опубликовано: 12 Апреля, 2022

Раньше у нас не было возможности вставлять даже изображения на веб-страницы, но с развитием веб-разработки мы смогли это сделать. Теперь, благодаря этому потоку разработки, мы можем даже встроить трехмерное изображение на веб-сайт. Компонент amp-3d-gltf Google AMP может отображать 3D-модели в формате glTF на нашем веб-сайте. Следует отметить, что для отображения 3D-моделей необходимо использовать браузер с поддержкой WebGL.

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

РЕКОМЕНДУЕМЫЕ СТАТЬИ