https://github.com/gftruj/aframe-lsd-component
Color changing component, matching the camera rotation with the hsl color system
https://github.com/gftruj/aframe-lsd-component
aframe aframevr hsl hsl-color webvr
Last synced: about 1 month ago
JSON representation
Color changing component, matching the camera rotation with the hsl color system
- Host: GitHub
- URL: https://github.com/gftruj/aframe-lsd-component
- Owner: gftruj
- License: mit
- Created: 2017-06-21T10:20:23.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-07-11T05:47:44.000Z (almost 6 years ago)
- Last Synced: 2024-09-24T09:13:33.183Z (7 months ago)
- Topics: aframe, aframevr, hsl, hsl-color, webvr
- Language: HTML
- Homepage:
- Size: 9.77 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
``
#### npm
`npm install 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 |
| performance | true | Change the color either on tick (false), or on component change(true) |
### Example:
https://aframe-lsd.glitch.me/