Indice

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

amp-3d-gltf

Description

Mostra modelli 3D nel formato 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

Mostra modelli 3D nel formato glTF (GL Transmission Format).

Script obbligatorio	`<script async custom-element="amp-3d-gltf" src="https://cdn.ampproject.org/v0/amp-3d-gltf-0.1.js"></script>`
Layout supportati	fill, fixed, fixed-height, flex-item, responsive
Esempi	Vedi l'esempio amp-3d-gltf del sito AMP By Example

Utilizzo

Il componente amp-3d-gltf mostra i modelli 3D che sono nel formato glTF.

Nota: per visualizzare questi modelli è necessario un browser che supporti WebGL.

Esempio

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

Limitazioni

Attualmente funziona solo con glTF 2.0.

Funzionalità non supportate:

Videocamere incorporate
Animazione

CORS

amp-3d-gltf effettua una richiesta fetch dall'origine https://<random>.ampproject.net, per cui access-control-allow-origin: *.ampproject.net deve essere impostato come intestazione della risposta dell'endpoint specificato come src. Il carattere jolly è necessario perché l'origine contiene un componente di sottodominio casuale.

Attributi

src [obbligatorio]	Un attributo obbligatorio che specifica l'URL del file gltf.
alpha [facoltativo]	Un attributo booleano che specifica se lo spazio libero su canvas è trasparente o meno. Per impostazione predefinita, lo spazio libero è riempito di nero. Il valore predefinito è `false`.
antialiasing [facoltativo]	Un attributo booleano che specifica se attivare o meno l'antialiasing. Il valore predefinito è `false`.
clearColor [facoltativo]	Una stringa che deve contenere un colore CSS valido che sarà utilizzato per riempire lo spazio libero su canvas.
maxPixelRatio [facoltativo]	Un valore numerico che specifica il limite superiore per l'opzione di visualizzazione pixelRatio. Il valore predefinito è `window.devicePixelRatio`.
autoRotate [facoltativo]	Un attributo booleano che specifica se ruotare automaticamente la videocamera attorno al centro del modello. Il valore predefinito è `false`.
enableZoom [facoltativo]	Un attributo booleano che specifica se attivare o meno lo zoom. Il valore predefinito è `true`.

Azioni

setModelRotation(x, y, z, xMin, xMax, yMin, yMax, zMin, zMax)

Imposta la rotazione del modello. L'ordine di rotazione è ZYX.

x/y/z - i numeri 0..1, impostano come valore predefinito il valore precedente della rotazione del modello
min/max - angolo in radianti, imposta come valore predefinito 0 / pi * 2, definisce l'intervallo di destinazione

Ad esempio, setModelRotation(x=0.5, xMin=0, xMax=3.14) imposterà la componente x della rotazione 1.57.

Convalida

Consulta le regole amp-3d-gltf nella specifica dello strumento di convalida AMP.

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow

Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub