Hugging Face's logo

Spaces:
awacke1
/
HTML5-Aframe-Augmented-Reality-Model-Viewer
Running

App Files Community
awacke1 commited on
Commit
25dd7d3
·
1 Parent(s): 0a19143

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +52 -16
index.html CHANGED
@@ -1,19 +1,55 @@
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>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Model Viewer AR - VR</title>
6
+ <meta name="description" content="Model Viewer (VR / AR) • A-Frame">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
8
+
9
+ <!-- Replace library URLs with CDN links -->
10
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
11
+ <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v5.1.0/dist/aframe-extras.min.js"></script>
12
+ <script src="https://cdn.rawgit.com/donmccurdy/aframe-animation-component/v4.1.2/dist/aframe-animation-component.min.js"></script>
13
+ <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.3.2/aframe/build/aframe-ar.js"></script>
14
+
15
+ <!-- Define code for the 3D model viewer -->
16
+ <script>
17
+ AFRAME.registerComponent('model-viewer', {
18
+ schema: {
19
+ gltfModel: { type: 'string', default: '' },
20
+ title: { type: 'string', default: '' }
21
+ },
22
+
23
+ init: function () {
24
+ var data = this.data;
25
+ var el = this.el;
26
+
27
+ el.setAttribute('scale', '0.2 0.2 0.2');
28
+ el.setAttribute('position', '0 1.5 -4');
29
+
30
+ el.setAttribute('gltf-model', data.gltfModel);
31
+ el.setAttribute('title', data.title);
32
+ }
33
+ });
34
+ </script>
35
+ </head>
36
+
37
+ <body>
38
+ <a-scene
39
+ renderer="colorManagement: true;"
40
+ arjs
41
+ model-viewer="gltfModel: #triceratops; title: Triceratops">
42
+ <a-assets timeout="10000">
43
+ <a-asset-item id="triceratops"
44
+ src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf"
45
+ response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>
46
+
47
+ <img id="shadow" src="shadow.png"></img>
48
+ <a-asset-item id="messageText" src="message.html"></a-asset-item>
49
+ </a-assets>
50
+
51
+ <!-- Create the model viewer element -->
52
+ <a-entity id="model-viewer"></a-entity>
53
+ </a-scene>
54
+ </body>
55
  </html>