aframe
ljus (komponent)
Sök…
Introduktion
Ljuskomponenten definierar enheten som en ljuskälla. Ljus påverkar alla material som inte har angett en platt skuggningsmodell med skuggning: platt. Observera att ljus är beräkningsvärda dyra, vi bör begränsa antalet ljus i en scen.
Syntax
- <a-enhet light = "färg: #AFA; intensitet: 1,5" position = "- 1 1 0"> </a-entity>
- <a-light type = "point" color = "blue" position = "0 5 0"> </a-light>
parametrar
| parametrar | detaljer |
|---|---|
| typ | En av omgivande, riktning, halvklot, punkt, plats. |
| Färg | Ljus färg. |
| intensitet | Ljusstyrka. |
Omgivande
Omgivande ljus globalt påverkar alla enheter i scenen. Färg- och intensitetsegenskaperna definierar omgivande ljus. Dessutom har position, rotation och skala ingen inverkan på omgivande ljus.
Vi rekommenderar att ha någon form av omgivande ljus så att skuggade områden inte är helt svarta och efterliknar indirekt belysning.
<a-entity light="type: ambient; color: #CCC"></a-entity>
directional
Riktningsljus är som en ljuskälla som är oändligt långt borta, men som lyser från en specifik riktning, som solen. Således har absolut position inte påverkan på ljusets intensitet på en enhet. Vi kan specificera riktningen med hjälp av positionskomponenten.
Exemplet nedan skapar en ljuskälla som lyser uppifrån till vänster i en 45-graders vinkel. Observera att eftersom endast vektorn är viktig, är position = "- 100 100 0" och position = "- 1 1 0" densamma.
<a-entity light="type: directional; color: #EEE; intensity: 0.5" position="-1 1 0"></a-entity>
Vi kan specificera riktningen för riktningsbelysningen med dess inriktning genom att skapa en barnenhet som den riktar sig till. Pekar till exempel ned sin -Z-axel:
<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>
Hemisfär
Hemisfärbelysningen är som ett omgivande ljus, men med två olika färger, en ovanifrån (färg) och en underifrån (groundColor). Detta kan vara användbart för scener med två distinkta ljusfärger (t.ex. ett gräsmark under en grå himmel).
<a-entity light="type: hemisphere; color: #33C; groundColor: #3C3; intensity: 2"></a-entity>
| Fast egendom | Beskrivning | Standardvärde |
|---|---|---|
| groundColor | Ljus färg underifrån. | #fff |
Punkt
Pekljus, till skillnad från riktningsbelysning, är riktningsriktade och påverkar material beroende på deras position och avstånd. Point likes är som glödlampa. Ju närmare lampan kommer ett objekt, desto större lyser objektet.
<a-entity light="type: point; intensity: 0.75; distance: 50; decay: 2"
position="0 10 10"></a-entity>
| Fast egendom | Beskrivning | Standardvärde |
|---|---|---|
| förfall | Mängden ljus dimmas längs ljusets avstånd. | 1,0 |
| distans | Avstånd där intensiteten blir 0. Om avståndet är 0, ruttnar inte punktljuset med avståndet. | 0,0 |
Fläck
Spotlight är som punktbelysning i den meningen att de påverkar material beroende på dess placering och avstånd, men spotlights är inte riktigt. De kastar främst ljus i en riktning, som Bat-Signal.
<a-entity light="type: spot; angle: 45"></a-entity>
| Fast egendom | Beskrivning | Standardvärde |
|---|---|---|
| vinkel | Maximal utsträckning av spotlight från dess riktning (i grader). | 60 |
| förfall | Mängden ljus dimmas längs ljusets avstånd. | 1,0 |
| distans | Avstånd där intensiteten blir 0. Om avståndet är 0, ruttnar inte punktljuset med avståndet. | 0,0 |
| halvskugga | Procent av strålkasterskotten som försvagas på grund av penumbra. | 0,0 |
| mål | element platsen bör peka på. ställ in på null för att transformera spotlight efter orientering, pekar på sin -Z axel. | null |
Standardbelysning
Som standard injicerar A-Frame-scener standardbelysning, ett omgivande ljus och ett riktningsbelysning. Dessa standardlampor syns i DOM med attributet data-aframe-default-light. När vi lägger till några lampor tar A-Frame bort standardlamporna från scenen.
<!-- 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>