|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Dynamic Lights - A-Frame</title> |
|
<meta name="description" content="Dynamic Lights - A-Frame"> |
|
<script src="https://aframe.io/releases/1.0.4/aframe.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> |
|
|
|
|
|
<a-entity entity-generator="mixin: torusKnot; num: 120"></a-entity> |
|
|
|
|
|
<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> |
|
|
