Spaces:
Running
Running
| <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> | |
| <!-- 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> |