Table des matières

Important: this documentation is not applicable to your currently selected format stories!

amp-3d-gltf

Description

Afficher les modèles 3D au format glTF (GL Transmission Format).

Required Scripts

<script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>

Supported Layouts

fill fixed fixed-height flex-item responsive

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.

Besoin d'une aide supplémentaire ?

Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.

Se rendre sur Stack Overflow

Vous avez trouvé un bug ou une fonctionnalité manquante ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Se rendre sur GitHub