aframe
luce (componente)
Ricerca…
introduzione
La componente di luce definisce l'entità come una fonte di luce. La luce colpisce tutti i materiali che non hanno specificato un modello di ombreggiatura piatta con lo shader: piatto. Nota che le luci sono troppo costose per il calcolo, dovremmo limitare il numero di luci in una scena.
Sintassi
- <a-entity light = "color: #AFA; intensity: 1.5" position = "- 1 1 0"> </ a-entity>
- <a-light type = "point" color = "blue" position = "0 5 0"> </ a-light>
Parametri
| parametri | Dettagli |
|---|---|
| genere | Uno di ambient, direzionale, emisfero, punto, punto. |
| colore | Colore chiaro. |
| intensità | Forza leggera. |
ambientale
Le luci ambientali influenzano globalmente tutte le entità nella scena. Le proprietà di colore e intensità definiscono le luci ambientali. Inoltre, la posizione, la rotazione e la scala non hanno alcun effetto sulle luci ambientali.
Raccomandiamo di avere una qualche forma di luce ambientale in modo che le aree in ombra non siano completamente nere e imitare l'illuminazione indiretta.
<a-entity light="type: ambient; color: #CCC"></a-entity>
Direzionale
Le luci direzionali sono come una fonte di luce che è infinitamente lontana, ma che brilla da una direzione specifica, come il sole. Pertanto, la posizione assoluta non ha alcun effetto sull'intensità della luce su un'entità. Possiamo specificare la direzione usando il componente di posizione.
L'esempio seguente crea una sorgente luminosa che brilla dall'angolo in alto a sinistra con un angolo di 45 gradi. Si noti che poiché solo il vettore è importante, position = "- 100 100 0" e position = "- 1 1 0" sono gli stessi.
<a-entity light="type: directional; color: #EEE; intensity: 0.5" position="-1 1 0"></a-entity>
Possiamo specificare la direzione della luce direzionale con il suo orientamento creando un'entità figlio a cui è destinata. Ad esempio, puntando il suo asse -Z:
<a-light type="directional" position="0 0 0" rotation="-90 0 0" target="#directionaltarget">
<a-entity id="directionaltarget" position="0 0 -1"></a-entity>
</a-light>
Emisfero
Le luci dell'emisfero sono come una luce ambientale, ma con due colori diversi, uno dall'alto (colore) e uno dal basso (terra). Questo può essere utile per scene con due distinti colori di illuminazione (ad esempio, un campo erboso sotto un cielo grigio).
<a-entity light="type: hemisphere; color: #33C; groundColor: #3C3; intensity: 2"></a-entity>
| Proprietà | Descrizione | Valore predefinito |
|---|---|---|
| groundColor | Colore chiaro dal basso | #F F F |
Punto
I punti luce, a differenza delle luci direzionali, sono omnidirezionali e influenzano i materiali a seconda della loro posizione e distanza. I like del punto sono come la lampadina. Più la lampadina si avvicina a un oggetto, più l'oggetto è illuminato.
<a-entity light="type: point; intensity: 0.75; distance: 50; decay: 2"
position="0 10 10"></a-entity>
| Proprietà | Descrizione | Valore predefinito |
|---|---|---|
| decadimento | Ammontare la luce si attenua lungo la distanza della luce. | 1.0 |
| distanza | Distanza in cui l'intensità diventa 0. Se la distanza è 0, la luce puntiforme non decadrà con la distanza. | 0.0 |
Individuare
Le luci spot sono come luci puntiformi nel senso che influenzano i materiali a seconda della posizione e della distanza, ma le luci spot non sono omnidirezionali. Principalmente proiettano la luce in una direzione, come il Bat-Signal.
<a-entity light="type: spot; angle: 45"></a-entity>
| Proprietà | Descrizione | Valore predefinito |
|---|---|---|
| angolo | Massima estensione della luce spot dalla sua direzione (in gradi). | 60 |
| decadimento | Ammontare la luce si attenua lungo la distanza della luce. | 1.0 |
| distanza | Distanza in cui l'intensità diventa 0. Se la distanza è 0, la luce puntiforme non decadrà con la distanza. | 0.0 |
| penombra | Percentuale del cono del faretto attenuato a causa di penombra. | 0.0 |
| bersaglio | elemento a cui dovrebbe puntare lo spot. impostato su null per trasformare il riflettore per orientamento, puntando al suo asse -Z. | nullo |
Illuminazione predefinita
Per impostazione predefinita, le scene A-Frame iniettano l'illuminazione predefinita, una luce ambientale e una luce direzionale. Queste luci di default sono visibili nel DOM con l'attributo data-aframe-default-light. Ogni volta che aggiungiamo qualsiasi luce, A-Frame rimuove le luci di default dalla scena.
<!-- Default lighting injected by A-Frame. -->
<a-entity light="type: ambient; color: #BBB"></a-entity>
<a-entity light="type: directional; color: #FFF; intensity: 0.6" position="-0.5 1 1"></a-entity>