1.1.0 • Published 7 years ago
aframe-lsd-component v1.1.0
aframe-lsd-component
Hue Saturation Lightness meets aframe ! Look around and see how the color is changing, according to the direction You're looking at.
Description
The component changes an entity materials color, while moving the camera ( or any oher object ) Simply put it in a entity :
The color changes according to the Hue Saturation Lighness system, while the horizontal rotation correspond to the hue angle, and the vertical rotation correspond to the saturation value.
Installation
CDN script to include:
<script src="https://cdn.rawgit.com/gftruj/aframe-lsd-component/0d653d4d/dist/lsd-component.js"></script>
npm
npm install --save aframe-lsd-component
Attributes
| Property | Default | Description |
|---|---|---|
| baseHueAngle | 0 | The Hue angle when initialized |
| baseSaturation | 50 | The saturation value, when the camera rotation.z is 0 |
| lightness | 50 | The 'l' from the hsl color system, it's constant. |
| saturationOffsetMin | 30 | The minimal saturation value when looking down. |
| saturationOffsetMax | 120 | The maximum saturation value when looking up. |
| activeCamera | 'a-camera' | This selector takes the object to which the component should be corresponding |
Notes:
- Why component instead of a material ? Afaik, the custom materials don't work with the 'tick' function, I want to implement it, so the color change would be a lot smoother. On the other hand I will have to work on the resource usage.