aframe
lumière (composant)
Recherche…
Introduction
La composante lumière définit l'entité comme source de lumière. La lumière affecte tous les matériaux qui n'ont pas spécifié de modèle d'ombrage plat avec shader: flat. Notez que les lumières sont coûteuses en calcul, nous devrions limiter le nombre de lumières dans une scène.
Syntaxe
- <a-entity light = "couleur: #AFA; intensité: 1.5" position = "- 1 1 0"> </ a-entity>
- <a-light type = "point" couleur = "bleu" position = "0 5 0"> </ a-light>
Paramètres
| Paramètres | Détails |
|---|---|
| type | L'un d'ambiant, directionnel, hémisphère, point, spot. |
| Couleur | Couleur claire. |
| intensité | Force de lumière. |
Ambiant
Les lumières ambiantes affectent globalement toutes les entités de la scène. Les propriétés de couleur et d'intensité définissent les lumières ambiantes. De plus, la position, la rotation et l'échelle n'ont aucun effet sur les lumières ambiantes.
Nous recommandons d’avoir une forme de lumière ambiante telle que les zones ombrées ne soient pas complètement noires et imitent un éclairage indirect.
<a-entity light="type: ambient; color: #CCC"></a-entity>
Directionnel
Les lumières directionnelles sont comme une source de lumière qui est infiniment loin, mais qui brille d'une direction spécifique, comme le soleil. Ainsi, la position absolue n’a pas d’effet sur l’intensité de la lumière sur une entité. Nous pouvons spécifier la direction en utilisant le composant de position.
L'exemple ci-dessous crée une source de lumière qui brille depuis le coin supérieur gauche à un angle de 45 degrés. Notez que comme seul le vecteur est important, position = "- 100 100 0" et position = "- 1 1 0" sont les mêmes.
<a-entity light="type: directional; color: #EEE; intensity: 0.5" position="-1 1 0"></a-entity>
Nous pouvons spécifier la direction de la lumière directionnelle avec son orientation en créant une entité enfant ciblée. Par exemple, en pointant son axe -Z vers le bas:
<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>
Hémisphère
Les lumières de l'hémisphère sont comme une lumière ambiante, mais avec deux couleurs différentes, l'une de dessus (couleur) et l'autre de dessous (GroundColor). Cela peut être utile pour les scènes avec deux couleurs d'éclairage distinctes (par exemple, un champ herbeux sous un ciel gris).
<a-entity light="type: hemisphere; color: #33C; groundColor: #3C3; intensity: 2"></a-entity>
| Propriété | La description | Valeur par défaut |
|---|---|---|
| GroundColor | Couleur claire d'en bas. | #fff |
Point
Les feux ponctuels, contrairement aux feux directionnels, sont omnidirectionnels et affectent les matériaux en fonction de leur position et de la distance. Les points aiment sont comme l'ampoule. Plus l'ampoule est proche d'un objet, plus l'objet est éclairé.
<a-entity light="type: point; intensity: 0.75; distance: 50; decay: 2"
position="0 10 10"></a-entity>
| Propriété | La description | Valeur par défaut |
|---|---|---|
| pourriture | La quantité de lumière diminue le long de la distance de la lumière. | 1.0 |
| distance | Distance où l'intensité devient 0. Si la distance est 0, le point lumineux ne diminue pas avec la distance. | 0.0 |
Place
Les projecteurs sont comme des points lumineux dans le sens où ils affectent les matériaux en fonction de leur position et de leur distance, mais les projecteurs ne sont pas omnidirectionnels. Ils émettent principalement de la lumière dans une direction, comme le Bat-Signal.
<a-entity light="type: spot; angle: 45"></a-entity>
| Propriété | La description | Valeur par défaut |
|---|---|---|
| angle | Étendue maximale du spot depuis sa direction (en degrés). | 60 |
| pourriture | La quantité de lumière diminue le long de la distance de la lumière. | 1.0 |
| distance | Distance où l'intensité devient 0. Si la distance est 0, le point lumineux ne diminue pas avec la distance. | 0.0 |
| pénombre | Pourcentage du cône du projecteur atténué en raison de la pénombre. | 0.0 |
| cible | élément que le spot devrait pointer. mis à null pour transformer le spot en orientation, en pointant sur son axe -Z. | nul |
Éclairage par défaut
Par défaut, les scènes A-Frame injectent un éclairage par défaut, une lumière ambiante et une lumière directionnelle. Ces voyants par défaut sont visibles dans le DOM avec l'attribut data-aframe-default-light. Chaque fois que nous ajoutons des lumières, A-Frame supprime les lumières par défaut de la scène.
<!-- 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>