Il componente Visualizzatore modello 3D e l'Editor 3D

Questo componente non è supportato per Google Ads, Google AdMob, annunci HTML AMP, annunci video o annunci illustrati.

Il componente Visualizzatore modello 3D ti consente di incorporare un Modello 3D in formato GLB nell'annuncio che gli utenti possano ruotare o su cui possono eseguire panoramiche e zoom. Puoi anche configurare il modello nell'Editor 3D di Google Web Designer.

3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer

Compatibilità del browser

Microsoft Edge non supporta il componente Visualizzatore modello 3D.

Per aggiungere il componente Visualizzatore modello 3D al tuo progetto:

1. Apri il riquadro Componenti, quindi la cartella Elementi grafici ed effetti.
2. Trascina il componente Visualizzatore modello 3D sullo stage.
3. Nella sezione Visualizzatore modello 3D del riquadro Proprietà, inserisci il file GLB che vuoi usare come Origine. Fai clic sul pulsante Sfoglia per selezionare un file dal tuo file system.
4. Fai doppio clic sul componente sullo stage per aprire la finestra di dialogo Editor 3D e configurare il modello. Al termine, fai clic su Salva.

Puoi modificare le preferenze di Google Web Designer (Modifica > Preferenze... > Componenti) per creare automaticamente un componente Visualizzatore modello 3D quando trascini un file GLB sullo stage.

Proprietà

Le proprietà del componente sono visibili nel riquadro Proprietà (devi uscire dall'Editor 3D).

Proprietà	Descrizione
Nome	Il nome del componente Visualizzatore modello 3D.
Origine	Il file GLB di origine per l'asset 3D. Il file di asset deve avere una dimensione massima di 3 MB. Per ulteriori linee guida, consulta la Guida agli asset 3D e utilizza lo strumento di convalida Khronos glTF per assicurarti che il tuo file GLB sia valido.

Proprietà avanzate

Proprietà	Descrizione
Icona segnale del gesto	L'immagine da visualizzare sul Modello 3D per richiedere all'utente di interagire con il modello. Il segnale del gesto si sposta leggermente per attirare l'attenzione dell'utente fino al raggiungimento del limite di animazione e scompare quando l'utente inizia a interagire con il modello. Associabile a dati dinamici.
Testo segnale del gesto	Il testo da visualizzare sotto l'icona del segnale del gesto. Si applica solo se è stata specificata un'icona del segnale del gesto. Associabile a dati dinamici.
Imposta limite per l'animazione	Seleziona questa casella e imposta un tempo in secondi per limitare la durata dell'animazione del segnale del gesto. Associabile a dati dinamici.

Editor 3D

Per aprire la finestra di dialogo dell'Editor 3D:

• Fai doppio clic sul componente Visualizzatore modello 3D sullo stage.

Visualizzerai un'anteprima del modello 3D che puoi ruotare e su cui puoi eseguire lo zoom. Puoi anche interagire con qualsiasi hotspot.

Utilizza il riquadro a destra per configurare il modello. Le configurazioni sono organizzate in due schede principali: GLB e Componente.

Scheda GLB

Le modifiche apportate nella scheda GLB vengono salvate nel file di origine dei modelli nella cartella degli asset. Sono inclusi tutti i file immagine utilizzati come texture, che verranno raggruppati nel file GLB. Puoi impostare le preferenze di Google Web Designer per eliminare automaticamente le texture non utilizzate.

Informazioni GLB
Origine	Il file GLB di origine per il modello 3D. Questo campo è di sola lettura. Per modificare il file di origine, esci dalla finestra di dialogo dell'Editor 3D e modifica la proprietà Origine nel riquadro Proprietà.
Dettagli	Dimensioni: la dimensione del file di origine.
Materiali
Materiali	Puoi configurare un materiale alla volta. Selezionato: in questo elenco a discesa vengono elencati tutti i materiali utilizzati nel modello 3D. Seleziona il materiale che vuoi visualizzare o modificare.
Colore di base	Il colore iniziale e la texture da utilizzare per il materiale corrente.
Metallica/Ruvidezza	Le proprietà Metallica e Ruvidezza determinano il modo in cui la luce si riflette sul materiale. Texture: seleziona una texture per indicare quali parti del materiale sono metalliche. Metallica: un valore compreso tra 0 e 1 per indicare quanto è metallico il materiale. Più un materiale è metallico, più riflette l'ambiente. Ruvidezza: un valore compreso tra 0 e 1 per indicare il livello di opacità del materiale, che incide sulla nitidezza dei riflessi. 0 è completamente riflettente e 1 è completamente opaco.
Mappa normale	Seleziona una texture per aggiungere sporgenze e dettagli della superficie al materiale.
Emissiva	Seleziona un colore e una texture per rappresentare la luminosità del materiale.
Occlusione	Seleziona una texture per rappresentare le ombre della luce ambientale.
Altro	Imposta opzioni aggiuntive per il materiale: Su entrambi i lati: seleziona questa casella di controllo per applicare il materiale su entrambi i lati. Fusione alfa: seleziona come devono essere trattati i valori alfa (trasparenza) delle texture: Opaco: i valori alfa vengono ignorati e la texture è sempre completamente opaca. Fusione: i valori alfa compresi tra 0 e 1 sono traslucidi. Maschera: ogni parte della texture è completamente opaca o completamente trasparente, a seconda del valore alfa in confronto al valore del Limite alfa specificato. I valori alfa più alti del limite vengono considerati come opachi.

Scheda Componente

Le modifiche apportate nella scheda Componente vengono applicate all'interno del componente Visualizzatore modello 3D e non nel file GLB di origine sottostante.

File HDR

I file immagine HDR (High Dynamic Range) possono essere utilizzati per lo sfondo e l'illuminazione ambientale nel componente Visualizzatore modello 3D. Ogni file HDR deve avere dimensioni inferiori a 150 kB. Ti consigliamo di ridimensionare i file HDR di grandi dimensioni a 256 x 128 per rispettare questi limiti.

Presentazione
Sfondo	Immagine: seleziona un'immagine o un ambiente (un file HDR) da utilizzare come sfondo. Associabile a dati dinamici.
Illuminazione ambientale (HDR)	Puoi usare un'illuminazione basata sulle immagini per fornire un'illuminazione dettagliata ispirata a un ambiente reale. Immagine: seleziona un'immagine sferica in formato HDR da utilizzare. Associabile a dati dinamici. Esposizione: il livello di esposizione della luce. Intensità delle ombre: l'opacità delle ombre. Morbidezza delle ombre: la sfocatura delle ombre.
Animazioni	Se il file GLB di origine contiene animazioni, puoi impostare un'animazione per la riproduzione automatica. Al momento, l'Editor 3D non supporta la creazione di animazioni. Predefinita: seleziona un'animazione esistente da utilizzare come predefinita. Riproduzione automatica: seleziona questa casella di controllo per avviare la riproduzione dell'animazione predefinita al caricamento del componente. Imposta limite per l'animazione: seleziona questa casella di controllo e inserisci il numero di secondi per cui vuoi che l'animazione venga riprodotta prima di essere messa automaticamente in pausa.
Fotocamera
Visualizzazione iniziale della fotocamera	La visualizzazione iniziale della fotocamera determina le impostazioni della fotocamera al momento del caricamento del componente. Vengono applicati i limiti della rotazione e dello zoom della fotocamera impostati di seguito. Scarto: il valore della rotazione della fotocamera intorno a un asse verticale espresso in gradi. Angolazione: il valore della rotazione della fotocamera intorno a un asse orizzontale espresso in gradi. Zoom: la distanza di una visualizzazione della fotocamera al modello. Usa la visualizzazione attuale come iniziale: fai clic su questo pulsante se hai regolato la visualizzazione della fotocamera nell'anteprima della finestra di dialogo dell'Editor 3D e vuoi utilizzare la visualizzazione corrente della fotocamera come visualizzazione iniziale della fotocamera.
Pivot dell'orbita	Il pivot dell'orbita è il punto nello spazio 3D attorno al quale ruota la fotocamera. Per impostazione predefinita, è impostato al centro del modello 3D. X: la posizione x del pivot dell'orbita. Y: la posizione y del pivot dell'orbita. Z: la posizione z del pivot dell'orbita. Reimposta: ripristina le coordinate predefinite del pivot dell'orbita.
Campo visivo	Il campo visivo verticale della fotocamera. Angolo: un angolo tra 1° e 179°.
Limiti rotazione della fotocamera	Se vuoi limitare la possibilità degli utenti di ruotare il modello, seleziona la casella di controllo Scarto o Angolazione e imposta gli angoli minimo e massimo. Scarto (da un lato all'altro): l'estensione della rotazione della fotocamera intorno a un asse verticale. Angolazione (su e giù): l'estensione della rotazione della fotocamera intorno a un asse orizzontale.
Limiti zoom della fotocamera	Tipo: seleziona se vuoi applicare limitazioni alla possibilità dell'utente di eseguire lo zoom: Distanza fotocamera illimitata: nessun limite. Questa è la selezione predefinita. Distanza fotocamera limitata: imposta un intervallo minimo e massimo di distanza. Il livello di zoom Min deve essere impostato su un valore inferiore a quello del livello di zoom Max. Distanza della fotocamera fissa: l'utente non può modificare il livello di zoom. I livelli di zoom Min e Max devono essere impostati sullo stesso valore.
Hotspot
Hotspot	Gli hotspot sono dei punti sul modello 3D con cui gli utenti possono interagire. Puoi mostrare schede informative o configurare eventi in risposta agli hotspot su cui è stato fatto clic. Aggiungi hotspot: crea un nuovo hotspot. Dopo aver selezionato questo pulsante, fai clic sul punto del modello 3D in cui vuoi impostare l'hotspot. Puoi personalizzare l'hotspot nei campi successivi. Nome: il nome dell'hotspot. Fai clic sull'icona Elimina accanto al nome di un hotspot per eliminarlo. Scheda informativa: determina se il clic sull'hotspot richiama una scheda informativa: Nessuna: non viene richiamata nessuna scheda informativa. Scheda informativa: viene richiamata una scheda informativa. Titolo: il titolo visualizzato nella scheda informativa. Associabile a dati dinamici. Descrizione: il testo visualizzato nella scheda informativa. Associabile a dati dinamici.
Immagine	Puoi personalizzare l'aspetto degli hotspot specificando le immagini per i diversi stati. Tutti gli hotspot utilizzano lo stesso insieme di immagini. Su: l'immagine predefinita utilizzata quando l'utente non interagisce con l'hotspot. Giù: l'immagine utilizzata quando l'utente fa clic su un hotspot. Immagine mouseover: l'immagine utilizzata quando l'utente passa il cursore del mouse sopra un hotspot. Dimensioni: la larghezza e l'altezza di un hotspot.
Stili scheda informativa	Personalizza l'aspetto della scheda informativa impostandone i colori. Colore carattere: il colore del titolo e del testo della scheda informativa. Colore di sfondo: il colore dello sfondo della scheda informativa. Colore bordo: il colore del bordo della scheda informativa.

Eventi e azioni

Eventi

Gli eventi possono essere utilizzati per attivare altre azioni nell'annuncio. Il componente Visualizzatore modello 3D invia i seguenti eventi:

Evento	Descrizione
Scena 3D visualizzata	Inviato dopo la visualizzazione della scena del modello 3D per la prima volta.
Fotocamera modificata	Inviato quando viene modificata una delle proprietà della fotocamera 3D. Se l'utente regola la fotocamera, l'oggetto event.detail contiene la proprietà source: user-interaction.
Hotspot selezionato	Inviato quando viene fatto clic su un hotspot (impostato nell'Editor 3D). L'oggetto event.detail contiene il nome dell'hotspot selezionato, l'indice dell'hotspot nell'elenco degli hotspot della scena e le coordinate dello schermo X e Y dell'hotspot.
Interazione iniziata	Inviato quando l'utente inizia a interagire con il modello 3D.
Interazione terminata	Inviato quando l'utente interrompe l'interazione con il modello 3D.

Per selezionare uno di questi eventi nella finestra di dialogo Eventi, imposta il componente Visualizzatore modello 3D come target.

Azioni

Le seguenti azioni del componente Visualizzatore modello 3D possono essere attivate in risposta ad altri eventi:

Evento	Descrizione	Opzioni di configurazione
Imposta scarto	Consente di modificare il modello con lo scarto specificato (rotazione intorno all'asse verticale) e mette in pausa l'animazione predefinita.	Scarto: l'angolo di scarto in gradi.
Imposta scarto target	Ruota il modello in modo uniforme fino allo scarto specificato.	Scarto target: l'angolo di scarto in gradi, tra -360 e 360.
Imposta angolazione target	Ruota il modello in modo uniforme fino all'angolazione specificata (rotazione attorno all'asse longitudinale).	Angolazione target: il valore dell'angolazione in gradi.
Incrementa angolazione target	Ruota il modello in modo uniforme verso l'angolazione target in base alla quantità specificata. Se il modello ha già raggiunto l'angolazione target, la modifica non avrà alcun effetto.	Delta angolazione: il numero di gradi da aggiungere all'angolazione corrente.
Imposta zoom target	Imposta in modo uniforme il livello di zoom specificato.	Zoom target: il livello di zoom (in metri).
Incrementa zoom target	Incrementa lo zoom target (in metri).	Delta zoom: utilizza un valore negativo per aumentare lo zoom.
Imposta pivot target	Consente di modificare il punto intorno al quale avviene la rotazione e di spostare facilmente la fotocamera nel punto in cui è possibile orbitarvi intorno.	Pivot target x: la posizione x (in metri). Pivot target y: la posizione y (in metri). Pivot target z: la posizione z (in metri).
Imposta panoramica locale target	Sposta la fotocamera in una nuova posizione.	Panoramica locale target x : (in metri). Panoramica locale target y: (in metri).
Imposta colore materiale	Imposta il colore del materiale.	Nome materiale Rosso: il valore rosso del nuovo colore (compreso tra 0 e 1). Verde: il valore verde del nuovo colore (compreso tra 0 e 1). Blu: il valore blu del nuovo colore (compreso tra 0 e 1).
Riproduci animazione	Riproduce l'animazione specificata.	Nome animazione
Metti in pausa l'animazione	Mette in pausa l'animazione specificata.	Nome animazione
Imposta tempo animazione	Cerca il momento specificato durante un'animazione.	Nome animazione Tempo animazione: il momento da cercare (in secondi).

Quando selezioni una di queste azioni nella finestra di dialogo Eventi, il componente Visualizzatore modello 3D viene impostato come destinatario.

Metodi API avanzati

Utilizzando un codice personalizzato è disponibile un metodo aggiuntivo.

getCameraDetails()

Restituisce un oggetto con i dettagli sulle impostazioni correnti della fotocamera.

Proprietà dell'oggetto restituito:

• yaw: il valore della rotazione attorno all'asse verticale espresso in gradi.
• pitch: il valore della rotazione attorno all'asse orizzontale espresso in gradi.
• zoom: il livello di zoom espresso in metri.
• x: la posizione x intorno alla quale orbita la fotocamera espressa in metri.
• y: la posizione y intorno alla quale orbita la fotocamera espressa in metri.
• z: la posizione z intorno alla quale orbita la fotocamera espressa in metri.

Gli utenti esperti possono anche consultare la documentazione all'indirizzo https://modelviewer.dev.

Anteprima

Il componente Visualizzatore modello 3D può essere visualizzato in anteprima solo nell'Editor 3D oppure nel browser facendo clic sul pulsante Anteprima nell'angolo in alto a destra.