<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shaders</title>
<meta name="description" content="Shaders">
<script src="../../../dist/aframe-master.js"></script>
<script src="shaders/noise.js"></script>
<script src="shaders/sky.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('sun-position-setter', {
init: function () {
var skyEl = this.el;
var orbitEl = this.el.sceneEl.querySelector('#orbit');
orbitEl.addEventListener('componentchanged', function changeSun (evt) {
var sunPosition;
var phi;
var theta;
if (evt.detail.name !== 'rotation') { return; }
sunPosition = orbitEl.getAttribute('rotation');
if(sunPosition === null) { return; }
theta = Math.PI * (- 0.5);
phi = 2 * Math.PI * (sunPosition.y / 360 - 0.5);
skyEl.setAttribute('material', 'sunPosition', {
x: Math.cos(phi),
y: Math.sin(phi) * Math.sin(theta),
z: -1
});
});
}
});
</script>
<a-scene stats>
<a-entity id="sky" geometry="primitive: sphere; radius: 100" material="shader: sky; side: back" sun-position-setter>
<a-entity id="orbit" animation="property: rotation; to: 0 360 0; dur: 5000; loop: true; easing: linear"></a-entity>
</a-entity>
<a-entity geometry="primitive: sphere; radius: 3" material="shader: noise" position="0 0 -10" rotation="45 45 0">
</a-entity>
</a-scene>
</body>
</html>
