Anteriormente no podíamos incrustar ni siquiera imágenes en las páginas web, pero con el desarrollo del desarrollo web, pudimos hacerlo. Ahora, con este flujo de desarrollo, podemos incluso incrustar una imagen 3D en el sitio web. El componente amp-3d-gltf de Google AMP puede mostrar modelos 3D que están en formato glTF en nuestro sitio web. Debe tenerse en cuenta que debe usar un navegador compatible con WebGL para mostrar modelos 3D.
Configuración: para usar esta etiqueta, debe importar el componente amp-3d-gltf en el encabezado.
HTML
<script async custom-element="amp-3d-gltf" src= "https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"> </script>
Ejemplo 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>
Producción:
Esta salida es para iPhone 6/7/8
Atributos :
|
No Señor. |
Nombre del Atributo |
Descripción |
|---|---|---|
| 1. |
origen |
Este es un atributo obligatorio ya que especifica la ubicación del archivo gltf que se mostrará. |
| 2. |
alfa |
Este es un atributo opcional y se usa para especificar el comportamiento del fondo del lienzo con valores booleanos. |
| 3. |
suavizado |
Es un atributo opcional y se usa para habilitar el antialiasing. El valor predeterminado es falso. |
| 4. |
color claro |
Es un atributo opcional y se usa para llenar el espacio libre en el lienzo con un color CSS. |
| 5. |
relación máxima de píxeles |
Es un atributo opcional y se usa para establecer un límite superior para la opción de representación pixelRatio. |
| 6. |
auto rotar |
Es un atributo opcional y se usa para habilitar la rotación automática alrededor del centro del modelo. |
| 7. |
habilitarZoom |
Es un atributo opcional y se usa para deshabilitar o habilitar el acercamiento y alejamiento del modelo. |
Ejemplo 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>
Producción:
Esta salida es para iPhone 6/7/8
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA