Hugging Face's logo

Spaces:
awacke1
/
HTML5-AR-VR
Running

App Files Community
HTML5-AR-VR
File size: 2,515 Bytes 
39b0e4f
 
900f01e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!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>

      <!-- 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>