<!DOCTYPE html> <html> <head> <title>Dynamic Lights - A-Frame</title> <meta name="description" content="Dynamic Lights - A-Frame"> <script src="../../../dist/aframe-master.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>