Utilizzo dei widget > 3D > Immagine 3D
  
Immagine 3D
Qual è la funzione di questo widget?
Il widget Immagine 3D consente di inserire un'immagine 3D nell'area di lavoro 3D di un'esperienza AR. L'elenco che segue include alcuni dei formati di file supportati:
• .png
• .jpg, .jpeg
• .svg
• .gif
• .bmp
Quando va utilizzato questo widget?
Utilizzare un widget Immagine 3D quando si desidera visualizzare contenuti grafici 3D o immagini per un utente. Ad esempio, se si sta cercando di descrivere l'aspetto di un filtro dell'aria sporco per un tecnico dell'assistenza, potrebbe essere più semplice includere un'immagine di un filtro dell'aria sporco.
Sono disponibili proprietà, servizi, eventi o azioni speciali?
Per visualizzare un elenco di proprietà, servizi ed eventi comuni a più widget, vedere Proprietà, servizi ed eventi comuni a più widget.
La seguente tabella riporta un elenco di proprietà specifiche di questo widget.
Proprietà
JavaScript
Tipo
Descrizione
Risorsa
src
string
Risorsa utilizzata per l'immagine 3D.
Per includere un'immagine, è possibile eseguire una delle operazioni riportate di seguito.
• Fare clic su accanto al campo per aggiungere un nuovo file immagine.
• Immettere o copiare e incollare l'URL dell'immagine direttamente nel campo.
• Selezionare un'immagine dal menu a discesa.
Altezza
height
number
Altezza dell'immagine 3D in metri. Il valore minimo è 0.04 metri.
Larghezza
width
number
Larghezza dell'immagine 3D in metri. Il valore minimo è 0.04 metri.
Classe
class
string
Classe assegnata al widget.
Le seguenti proprietà CSS sono attualmente supportate:
• background-color - Imposta il colore di riempimento dell'immagine.
• border-color - Imposta il colore del bordo dell'immagine.
• border-style - Imposta lo stile del bordo dell'immagine.
• border-radius - Arrotonda gli angoli del bordo dell'immagine.
• border-width - Imposta la larghezza del tratto del bordo dell'immagine.
• border - Combina border-color, border-style e border-width.
• padding - Applica la spaziatura interna fuori dall'immagine.
Ad esempio, nel riquadro PROGETTO, in STILI, fare clic su Applicazione e immettere quanto segue nell'editor:
.my-image {
border-color: black;
border-style: solid;
border-radius: 5px;
border-width: 3px;
background-color: white
padding: 25px 15px 25px 40px;
}
* 
I colori specificati devono essere colori CSS. Se non si è certi dei colori CSS validi, è possibile eseguire una ricerca in Internet di "colori CSS".
Successivamente, nel campo Classe dell'immagine 3D, immettere my-image, Questo si riferisce al contenuto aggiunto in Stili > Applicazione.
Scala
scale
string
Scala dell'immagine 3D.
Coordinata X
x
number
Posizione dell'immagine sull'asse X.
Coordinata Y
y
number
Posizione dell'immagine sull'asse Y.
Coordinata Z
z
number
Posizione dell'immagine sull'asse Z.
Rotazione X
rz
number
Rotazione dell'immagine intorno all'asse X.
Rotazione Y
ry
number
Rotazione dell'immagine intorno all'asse Y.
Rotazione Z
rz
number
Rotazione dell'immagine intorno all'asse Z.
Frontale
billboard
boolean
Ruota un widget intorno al proprio centro in modo che sia sempre rivolto verso l'utente che visualizza l'esperienza. È allineato con lo schermo.
Occlusivo
occlude
boolean
Se selezionata, la geometria di un widget è invisibile, ma allo stesso tempo nasconde qualsiasi altra augmentation dietro di essa nella scena 3D.
Pertanto, lo sfondo o il feed della fotocamera appare dove dovrebbe trovarsi il widget occluso. Questa proprietà può essere utilizzata per enfatizzare alcune augmentation nascondendo la geometria 3D circostante.
Sempre in primo piano
decal
boolean
Sovrappone la geometria dei widget a tutte le altre augmentation nella scena, indipendentemente dalla sua profondità nella scena 3D. Se impostata su Sì, non verrà nascosta da altre augmentation.
Opacità (1 opaco - 0 trasparente)
opacity
number
Un numero compreso tra 0 e 1 che controlla il livello di trasparenza dell'oggetto. 0 = completamente trasparente e 1 = completamente opaco.
Pivot
pivot
boolean
Determina il punto di rotazione dell'immagine:
• In alto a sinistra
• In alto al centro
• In alto a destra
• Al centro a sinistra
• Al centro
• Al centro a destra
• In basso a sinistra
• In basso al centro
• In basso a destra
Come funziona il widget
Ecco un esempio dell'aspetto che potrebbe avere il widget.
Passi fondamentali richiesti per l'uso
Come si presenta
1. Trascinare e rilasciare un widget Immagine 3D nell'area di lavoro.
2. (Facoltativo) Selezionare la casella di controllo Frontale nel riquadro DETTAGLI.
3. Nel campo Risorsa, selezionare un'immagine esistente, aggiungere una nuova immagine o inserire l'URL dell'immagine che si desidera visualizzare.
4. Posizionare l'immagine nell'area di lavoro come appropriato.
Definire lo stile del widget con CSS
Per definire lo stile del widget è possibile utilizzare CSS. Quello che segue è un esempio di classe CSS che è possibile creare e applicare:
* 
È consigliabile assegnare nomi univoci alle classi in modo che non siano in conflitto con altre classi o proprietà predefinite.
Esempio CSS
Come si presenta
.ptc-3DImage {
padding: 10px;
border: 10px solid black;
border-radius: 50px;
background: green;
}
Per ulteriori informazioni sull'implementazione delle classi CSS, vedere Stili dell'applicazione.