-
Notifications
You must be signed in to change notification settings - Fork 2
/
example.html
41 lines (39 loc) · 1.78 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>aframe-simple-sun-sky Primitive</title>
<meta name="description" content="An example scene with a simple-sun-sky, a sphere and a plane">
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<!-- <script src="simple-sun-sky.js"></script>-->
<script src="https://unpkg.com/aframe-simple-sun-sky@^1.2.3/simple-sun-sky.js"></script>
<script>
AFRAME.registerComponent('moving-sun', {
init: function () {
this.positionSph = new THREE.Spherical(1, Math.PI/2, 0);
this.position = new THREE.Vector3();
this.sss = document.querySelector('a-simple-sun-sky');
this.directional = document.getElementById('directional');
},
tick: function (time) {
this.positionSph.phi = Math.PI * 0.4 + Math.sin(time / 16000 * 2 * Math.PI) * 0.4;
this.positionSph.theta = Math.PI + Math.sin(time / 24000 * 2 * Math.PI) * 0.6;
this.position.setFromSpherical(this.positionSph);
let positionStr = this.position.x + ' ' + this.position.y + ' ' + this.position.z;
// console.log(positionStr);
this.sss.setAttribute('sun-position', positionStr);
this.directional.setAttribute('position', positionStr);
}
});
</script>
</head>
<body>
<a-scene moving-sun>
<a-simple-sun-sky sun-position="0.7 0.4 -1"></a-simple-sun-sky>
<a-entity light="type: ambient; color: #BBB"></a-entity>
<a-entity id="directional" light="type: directional; color: #FFF; intensity: 0.6" position="0.7 0.4 -1"></a-entity>
<a-sphere position="0 1.6 -5" radius="0.6" color="#EF2D5E" shadow></a-sphere>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" opacity="0.3" transparent:true shadow></a-plane>
</a-scene>
</body>
</html>