aframe-colorwheel-component
Version:
A-Frame Color Wheel component, designed for A-Frame Material
43 lines (39 loc) • 1.61 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Colorwheel Component: Basic Prop colorization example</title>
<meta name="description" content="A-Frame Colorwheel">
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
<script src="../../dist/aframe-colorwheel-component.js"></script>
<script type="text/javascript">
//Example of using the color wheel with events
AFRAME.registerComponent('color-listener', {
init: function(){
const el = this.el;
document.body.addEventListener('didchangecolor', function(evt){
//Available return formats from colorwheel
let style = evt.detail.style
let rgb = evt.detail.rgb
let hsv = evt.detail.hsv
el.setAttribute('environment', 'dressingColor', style)
})
}
})
</script>
</head>
<body>
<a-scene>
<a-entity laser-controls="hand: right"></a-entity>
<a-entity laser-controls="hand: left"></a-entity>
<a-entity>
<a-camera raycaster look-controls-enabled wasd-controls-enabled>
<a-entity cursor="rayOrigin: mouse"></a-entity>
</a-camera>
</a-entity>
<a-colorwheel position="-1.578 1 -2.5" rotation="0 21.601 0" showhexvalue="true"></a-colorwheel>
<a-entity environment="preset: japan; lighting: none" color-listener></a-entity>
</a-scene>
</body>
</html>