Hugging Face's logo

Spaces:
AI-Zero-to-Hero-Dec-2023
/
FirstSample-FirstHTML5Space-AIPP-AR-VR
Running

App Files Community
awacke1 commited on
Commit
abe3137
·
0 Parent(s):

Duplicate from AI-ZTH-03-23/3.HTML5-Aframe-3dMap-Flight

Browse files
Files changed (4) hide show
  1. .gitattributes +34 -0
  2. README.md +53 -0
  3. index.html +46 -0
  4. style.css +28 -0
.gitattributes ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ *.7z filter=lfs diff=lfs merge=lfs -text
2
+ *.arrow filter=lfs diff=lfs merge=lfs -text
3
+ *.bin filter=lfs diff=lfs merge=lfs -text
4
+ *.bz2 filter=lfs diff=lfs merge=lfs -text
5
+ *.ckpt filter=lfs diff=lfs merge=lfs -text
6
+ *.ftz filter=lfs diff=lfs merge=lfs -text
7
+ *.gz filter=lfs diff=lfs merge=lfs -text
8
+ *.h5 filter=lfs diff=lfs merge=lfs -text
9
+ *.joblib filter=lfs diff=lfs merge=lfs -text
10
+ *.lfs.* filter=lfs diff=lfs merge=lfs -text
11
+ *.mlmodel filter=lfs diff=lfs merge=lfs -text
12
+ *.model filter=lfs diff=lfs merge=lfs -text
13
+ *.msgpack filter=lfs diff=lfs merge=lfs -text
14
+ *.npy filter=lfs diff=lfs merge=lfs -text
15
+ *.npz filter=lfs diff=lfs merge=lfs -text
16
+ *.onnx filter=lfs diff=lfs merge=lfs -text
17
+ *.ot filter=lfs diff=lfs merge=lfs -text
18
+ *.parquet filter=lfs diff=lfs merge=lfs -text
19
+ *.pb filter=lfs diff=lfs merge=lfs -text
20
+ *.pickle filter=lfs diff=lfs merge=lfs -text
21
+ *.pkl filter=lfs diff=lfs merge=lfs -text
22
+ *.pt filter=lfs diff=lfs merge=lfs -text
23
+ *.pth filter=lfs diff=lfs merge=lfs -text
24
+ *.rar filter=lfs diff=lfs merge=lfs -text
25
+ *.safetensors filter=lfs diff=lfs merge=lfs -text
26
+ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
27
+ *.tar.* filter=lfs diff=lfs merge=lfs -text
28
+ *.tflite filter=lfs diff=lfs merge=lfs -text
29
+ *.tgz filter=lfs diff=lfs merge=lfs -text
30
+ *.wasm filter=lfs diff=lfs merge=lfs -text
31
+ *.xz filter=lfs diff=lfs merge=lfs -text
32
+ *.zip filter=lfs diff=lfs merge=lfs -text
33
+ *.zst filter=lfs diff=lfs merge=lfs -text
34
+ *tfevents* filter=lfs diff=lfs merge=lfs -text
README.md ADDED
@@ -0,0 +1,53 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: 3.HTML5-3D-VR-Aframe-Map-Land
3
+ emoji: 🗺️VR🏞️
4
+ colorFrom: blue
5
+ colorTo: green
6
+ sdk: static
7
+ pinned: false
8
+ license: mit
9
+ duplicated_from: AI-ZTH-03-23/3.HTML5-Aframe-3dMap-Flight
10
+ ---
11
+
12
+ 🏷️ **Title:** HTML5-3D-VR-Aframe-Map 📚3D-VR
13
+
14
+ 📋 **Description:** This is a fun 📚3D-VR simulator that shows a map 🗺️ with motion controls ⌨️ of the WASD keyboard. You can explore a 3D landscape 🏞️ using Aframe.
15
+
16
+ 🧐 **Details:**
17
+
18
+ - **HTML5:** Refers to the version of the HTML (Hypertext Markup Language) used to create the web page on which the 3D-VR-Aframe-Map is hosted.
19
+
20
+ - **3D:** Refers to the three-dimensional nature of the map in the 3D-VR-Aframe-Map simulator.
21
+
22
+ - **VR:** Refers to the virtual reality aspect of the 3D-VR-Aframe-Map simulator. Users can immerse themselves in the virtual environment and interact with it using VR headsets.
23
+
24
+ - **Aframe:** Refers to the web framework used to create the 3D-VR-Aframe-Map simulator. Aframe is a popular framework for creating virtual reality experiences on the web.
25
+
26
+ - **Map:** Refers to the representation of geographic or spatial data in a visual form. In the 3D-VR-Aframe-Map simulator, users can explore a 3D landscape using motion controls and a map interface.
27
+
28
+ 💻 **Code Snippet:**
29
+
30
+ ```html
31
+ <html>
32
+ <head>
33
+ <title>HTML5-3D-VR-Aframe-Map 📚3D-VR </title>
34
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
35
+ </head>
36
+ <body>
37
+ <a-scene>
38
+ <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
39
+ <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
40
+ <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
41
+ <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
42
+ <a-sky color="#ECECEC"></a-sky>
43
+ </a-scene>
44
+ </body>
45
+ </html>
46
+ ```
47
+
48
+ 🔑 Acronyms:
49
+
50
+ HTML: Hypertext Markup Language, a coding language used to create web pages.
51
+ VR: Virtual Reality, an immersive experience that simulates a real environment.
52
+ Aframe: A web framework used to create virtual reality experiences on the web.
53
+ WASD: A set of four keyboard keys that are commonly used in video games for motion controls.
index.html ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Recursive Polygons in 3D</title>
6
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
7
+ <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
8
+ <style>
9
+ #canvas {
10
+ height: 500px;
11
+ width: 800px;
12
+ }
13
+ </style>
14
+ </head>
15
+ <body>
16
+ <a-scene>
17
+ <a-entity environment="preset: forest"></a-entity>
18
+
19
+ <!-- Recursive Polygon Component -->
20
+ <a-entity recursive-polygon="
21
+ vertices: 6; // Number of vertices
22
+ scale: 2; // Scale factor
23
+ level: 5; // Recursive level
24
+ color: #FFC65D; // Polygon color
25
+ height: 0.5; // Polygon height
26
+ x: 0; // X-position
27
+ y: 0; // Y-position
28
+ z: -5 // Z-position
29
+ "></a-entity>
30
+
31
+ <!-- Math Function -->
32
+ <a-entity math-function="
33
+ func: sin(x^2+y^2)/sqrt(x^2+y^2); // Math function to evaluate
34
+ xmin: -5; xmax: 5; // Range of x-values
35
+ ymin: -5; ymax: 5; // Range of y-values
36
+ xstep: 0.2; ystep: 0.2; // Step size for x and y
37
+ scale: 0.5; // Scale factor
38
+ color: #8CEEEF; // Function color
39
+ height: 0.1; // Function height
40
+ z: -5 // Z-position
41
+ "></a-entity>
42
+
43
+ <a-entity camera position="0 1.6 0" look-controls wasd-controls></a-entity>
44
+ </a-scene>
45
+ </body>
46
+ </html>
style.css ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ padding: 2rem;
3
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
+ }
5
+
6
+ h1 {
7
+ font-size: 16px;
8
+ margin-top: 0;
9
+ }
10
+
11
+ p {
12
+ color: rgb(107, 114, 128);
13
+ font-size: 15px;
14
+ margin-bottom: 10px;
15
+ margin-top: 5px;
16
+ }
17
+
18
+ .card {
19
+ max-width: 620px;
20
+ margin: 0 auto;
21
+ padding: 16px;
22
+ border: 1px solid lightgray;
23
+ border-radius: 16px;
24
+ }
25
+
26
+ .card p:last-child {
27
+ margin-bottom: 0;
28
+ }