-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
/
index.html
70 lines (65 loc) · 2.88 KB
/
index.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
<!-- Origin Trial Token, feature = WebVR (For Chrome M59+), origin = https://aframe.io, expires = 2017-07-28 -->
<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M59+)" data-expires="2017-07-28" content="ArFv1ZeTwzkhjNE00uAE+XtiQB41fwqG/TqlFMLrepd9sforQSvQE/tgfIbUMYNuNre4QR1k4/z8xp2mV3dbhwwAAABeeyJvcmlnaW4iOiJodHRwczovL2FmcmFtZS5pbzo0NDMiLCJmZWF0dXJlIjoiV2ViVlIxLjEiLCJleHBpcnkiOjE1MDEyMTcwMDIsImlzU3ViZG9tYWluIjp0cnVlfQ==">
<title>Dynamic Lights - A-Frame</title>
<meta name="description" content="Dynamic Lights - A-Frame">
<script src="../../../dist/aframe-master.min.js"></script>
<script src="https://unpkg.com/aframe-randomizer-components@3.0.2/dist/aframe-randomizer-components.min.js"></script>
<script src="https://unpkg.com/aframe-entity-generator-component@3.0.1/dist/aframe-entity-generator-component.min.js"></script>
<script>
AFRAME.registerComponent('random-material', {
init: function () {
this.el.setAttribute('material', {
color: this.getRandomColor(),
metalness: Math.random(),
roughness: Math.random()
});
},
getRandomColor: function () {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
});
AFRAME.registerComponent('random-torus-knot', {
init: function () {
this.el.setAttribute('geometry', {
primitive: 'torusKnot',
radius: Math.random() * 10,
radiusTubular: Math.random() * .75,
p: Math.round(Math.random() * 10),
q: Math.round(Math.random() * 10)
});
}
});
</script>
</head>
<body>
<a-scene background="color: #111">
<a-assets>
<a-mixin id="light"
geometry="primitive: sphere; radius: 1.5"
material="color: #FFF; shader: flat"
light="color: #DDDDFF; distance: 120; intensity: 2; type: point"></a-mixin>
<a-mixin id="torusKnot"
random-torus-knot
random-material
random-position="min: -60 -60 -80; max: 60 60 40"></a-mixin>
</a-assets>
<!-- Use entity-generator component to generate 120 entities with the torusKnot mixin. -->
<a-entity entity-generator="mixin: torusKnot; num: 120"></a-entity>
<!-- Lights. -->
<a-entity animation="property: rotation; to: 0 0 360; dur: 4000; easing: linear; loop: true">
<a-entity mixin="light" position="30 0 0"></a-entity>
</a-entity>
<a-entity animation="property: rotation; to: 360 0 0; dur: 4000; easing: linear; loop: true">
<a-entity mixin="light" position="0 0 40"></a-entity>
</a-entity>
</a-scene>
</body>
</html>