AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

amp-3d-gltf

Ce composant affiche les modèles 3D au format glTF (GL Transmission Format).

Script requis <script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>
Mises en page compatibles fill, fixed, fixed-height, flex-item, responsive
Exemples Consultez l'exemple de composant amp-3d-gltf sur AMP By Example.

Utilisation

Le composant amp-3d-gltf affiche les modèles 3D qui sont au format glTF.

Remarque : Un navigateur compatible WebGL est requis pour afficher ces modèles.

Exemple

<amp-3d-gltf
    layout="responsive"
    width="320"
    height="240"
    alpha="true"
    antialiasing="true"
    src="path/to/model.glb"></amp-3d-gltf>

Limitations

Actuellement, ce composant fonctionne uniquement avec le format glTF 2.0.

Fonctionnalités non compatibles :

  • Caméras intégrées
  • Animation

CORS

amp-3d-gltf effectue une requête fetch à partir de l'origine https://<random>.ampproject.net. access-control-allow-origin : *.ampproject.net doit donc être défini dans l'en-tête de réponse du point de terminaison spécifié en tant que src. Un caractère générique est nécessaire, car l'origine est associée à un composant de sous-domaine aléatoire.

Attributs

src [obligatoire] Attribut obligatoire qui indique l'URL du fichier gltf.
alpha [facultatif] Attribut booléen qui indique si l'espace disponible sur le canevas est transparent ou opaque. Par défaut, l'espace disponible est noir. La valeur par défaut est false.
antialiasing [facultatif] Attribut booléen qui indique si l'anticrénelage doit être activé ou désactivé. La valeur par défaut est false.
clearColor [facultatif] Chaîne qui doit contenir une couleur CSS valide. Cette couleur sera utilisée pour remplir l'espace disponible sur le canevas.
maxPixelRatio [facultatif] Valeur numérique qui indique la limite supérieure de l'option de rendu pixelRatio. La valeur par défaut est window.devicePixelRatio.
autoRotate [facultatif] Attribut booléen qui indique si la caméra doit pivoter automatiquement ou non autour du centre du modèle. La valeur par défaut est false.
enableZoom [facultatif] Attribut booléen qui indique si le zoom doit être activé ou désactivé. La valeur par défaut est true.

Actions

setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax) Définit la rotation du modèle ; l'ordre de rotation est ZYX
  • x/y/z - nombre 0..1, défini par défaut sur la valeur précédente de rotation du modèle.
  • min/max - angle en radians, défini par défaut sur 0 / pi * 2 ; définit la plage cible.
Par exemple, setModelRotation(x=0.5, xMin=0, xMax=3.14) change le composant de rotation x en 1.57.

Validation

Consultez les règles relatives à amp-3d-gltf dans les spécifications du validateur AMP.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub