Hugging Face's logo

Spaces:
awacke1
/
AR-VR-IOT-Demo
Running

App Files Community
awacke1 commited on
Commit
0b0afc6
•
1 Parent(s): ed80b31

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +64 -22
index.html CHANGED
@@ -1,24 +1,66 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>
13
- You can modify this app directly by editing <i>index.html</i> in the
14
- Files and versions tab.
15
- </p>
16
- <p>
17
- Also don't forget to check the
18
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank"
19
- >Spaces documentation</a
20
- >.
21
- </p>
22
- </div>
23
- </body>
24
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <title>Dynamic Lights - A-Frame</title>
5
+ <meta name="description" content="Dynamic Lights - A-Frame">
6
+ <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
7
+ <script src="https://unpkg.com/aframe-randomizer-components@3.0.2/dist/aframe-randomizer-components.min.js"></script>
8
+ <script src="https://unpkg.com/aframe-entity-generator-component@3.0.1/dist/aframe-entity-generator-component.min.js"></script>
9
+ <script>
10
+ AFRAME.registerComponent('random-material', {
11
+ init: function () {
12
+ this.el.setAttribute('material', {
13
+ color: this.getRandomColor(),
14
+ metalness: Math.random(),
15
+ roughness: Math.random()
16
+ });
17
+ },
18
+ getRandomColor: function () {
19
+ var letters = '0123456789ABCDEF'.split('');
20
+ var color = '#';
21
+ for (var i = 0; i < 6; i++) {
22
+ color += letters[Math.floor(Math.random() * 16)];
23
+ }
24
+ return color;
25
+ }
26
+ });
27
+ AFRAME.registerComponent('random-torus-knot', {
28
+ init: function () {
29
+ this.el.setAttribute('geometry', {
30
+ primitive: 'torusKnot',
31
+ radius: Math.random() * 10,
32
+ radiusTubular: Math.random() * .75,
33
+ p: Math.round(Math.random() * 10),
34
+ q: Math.round(Math.random() * 10)
35
+ });
36
+ }
37
+ });
38
+ </script>
39
+ </head>
40
+ <body>
41
+ <a-scene background="color: #111">
42
+ <a-assets>
43
+ <a-mixin id="light"
44
+ geometry="primitive: sphere; radius: 1.5"
45
+ material="color: #FFF; shader: flat"
46
+ light="color: #DDDDFF; distance: 120; intensity: 2; type: point"></a-mixin>
47
+ <a-mixin id="torusKnot"
48
+ random-torus-knot
49
+ random-material
50
+ random-position="min: -60 -60 -80; max: 60 60 40"></a-mixin>
51
+ </a-assets>
52
+
53
+ <!-- Use entity-generator component to generate 120 entities with the torusKnot mixin. -->
54
+ <a-entity entity-generator="mixin: torusKnot; num: 120"></a-entity>
55
+
56
+ <!-- Lights. -->
57
+ <a-entity animation="property: rotation; to: 0 0 360; dur: 4000; easing: linear; loop: true">
58
+ <a-entity mixin="light" position="30 0 0"></a-entity>
59
+ </a-entity>
60
+
61
+ <a-entity animation="property: rotation; to: 360 0 0; dur: 4000; easing: linear; loop: true">
62
+ <a-entity mixin="light" position="0 0 40"></a-entity>
63
+ </a-entity>
64
+ </a-scene>
65
+ </body>
66
+ </html>