Skip to content

Color changing component, matching the camera rotation with the hsl color system

License

Notifications You must be signed in to change notification settings

gftruj/aframe-lsd-component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 : <a-sky lsd-component>

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/c1782554/dist/lsd-component.js"></script>

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/

About

Color changing component, matching the camera rotation with the hsl color system

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages