谷歌 AMP amp-3d-gltf

早些时候，我们甚至无法在网页中嵌入图像，但随着 Web 开发的发展，我们能够做到这一点。现在通过这种开发流程，我们甚至可以在网站上嵌入 3D 图像。 Google AMP 的 amp-3d-gltf 组件能够在我们的网站上显示glTF 格式的 3D 模型。必须注意，您必须使用支持 WebGL 的浏览器来显示 3D 模型。

设置：要使用此标签，您必须在标头中导入 amp-3d-gltf 组件。

示例 1：

HTML

 

    
    
 
    
 
    
    
 
    Google AMP amp-3d-gltf
     
    
    
    
     
    
        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
            }
        }
    
 
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
 
    
        h1 {
            color: green;
            text-align: center;
        }
    

 

    
        Geeks For Geeks
    
 
    
    
    

 

输出：

此输出适用于 iPhone 6/7/8

属性：

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.

示例 2：

HTML

 

    
    
 
    
 
    
    
 
    Google AMP amp-3d-gltf
 
    
    
    
     
    
        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
            }
        }
    
 
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
 
    
        h1 {
            color: green;
            text-align: center;
        }
    

 

    
        Geeks For Geeks
    
 
    
    

 

输出：

此输出适用于 iPhone 6/7/8