Omar
/
AR
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Omar:2cb008c85ae60fae6b7ab07748218219dc5d2b26
Branches Tags
Omar:main
..
compare: Omar:e2f83e6a5d25cf844a0f00397bfbc33b678215a9
Branches Tags
Omar:main

No commits in common. "2cb008c85ae60fae6b7ab07748218219dc5d2b26" and "e2f83e6a5d25cf844a0f00397bfbc33b678215a9" have entirely different histories.
2cb008c85a ... e2f83e6a5d

9 changed files with 82 additions and 1086 deletions
Show Stats Expand all files Collapse all files

BIN
assets/Pictures/Cappocino.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 118 KiB

49
assets/arTab/Cappuccino.html
View File

@ -1,49 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
<script src="smooth_script.js"></script>
<script src="rotation_limit.js"></script>
</head>
<body id="gamed" style="margin: 0px; overflow: hidden">
<div
class="overlay"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(
138,
137,
137,
0.668
); /* Change the color and opacity here */
"
></div>
<a-scene embedded arjs="patternRatio:0.8;">
<a-marker
lerpsmooth
id="marker"
type="pattern"
url="pattern-WebAR_QR.patt"
>
<a-box
id="second-box-as-comparison"
position="0 0 0"
material="opacity: 0"
></a-box>
</a-marker>
<a-entity id="smoothed-box" position="0 0 0" scale="5 5 5">
<a-entity
rotation="0 0 0"
gltf-model="cup_of_cappuccino/scene.gltf"
rotation-limiter
></a-entity>
</a-entity>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>

50
assets/arTab/Tagen.html
View File

@ -1,50 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
<script src="smooth_script.js"></script>
<script src="rotation_limit.js"></script>
</head>
<body id="gamed" style="margin: 0px; overflow: hidden">
<div
class="overlay"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(
138,
137,
137,
0.668
); /* Change the color and opacity here */
"
></div>
<a-scene embedded arjs="patternRatio:0.8;">
<a-marker
lerpsmooth
id="marker"
type="pattern"
url="pattern-WebAR_QR.patt"
>
<a-box
id="second-box-as-comparison"
position="0 0 0"
material="opacity: 0"
></a-box>
</a-marker>
<a-entity id="smoothed-box" position="0 0 0" scale="0.05 0.05 0.05">
<a-entity
rotation="0 0 0"
gltf-model="tagen/scene.gltf"
rotation-limiter
></a-entity>
</a-entity>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>

BIN
assets/arTab/tagen/default_tex0_baseColor.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 38 MiB

1
assets/arTab/tagen/license.txt
View File

@ -1 +0,0 @@
This model was uploaded to and downloaded from Sketchfab.com under the sole responsibility of the User (as defined on sketchfab.com/terms). The downloading party is solely responsible for ensuring that any User Content uploaded to or downloaded from the Sketchfab Services complies with any applicable laws and third party rights, including but not limited to any intellectual property rights, privacy rights and publicity rights, as per Sketchfab terms sketchfab.com/terms.

BIN
assets/arTab/tagen/scene.bin
View File

Binary file not shown.

906
assets/arTab/tagen/scene.gltf
View File

@ -1,906 +0,0 @@
{
"asset" : {
"generator" : "Khronos glTF Blender I/O v1.8.19",
"version" : "2.0"
},
"extensionsUsed" : [
"KHR_materials_unlit"
],
"scene" : 0,
"scenes" : [
{
"name" : "Scene",
"nodes" : [
14
]
}
],
"nodes" : [
{
"mesh" : 0,
"name" : "Object_10"
},
{
"mesh" : 1,
"name" : "Object_11"
},
{
"mesh" : 2,
"name" : "Object_12"
},
{
"mesh" : 3,
"name" : "Object_13"
},
{
"mesh" : 4,
"name" : "Object_14"
},
{
"mesh" : 5,
"name" : "Object_4"
},
{
"mesh" : 6,
"name" : "Object_5"
},
{
"mesh" : 7,
"name" : "Object_6"
},
{
"mesh" : 8,
"name" : "Object_7"
},
{
"mesh" : 9,
"name" : "Object_8"
},
{
"mesh" : 10,
"name" : "Object_9"
},
{
"children" : [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10
],
"name" : "_0"
},
{
"children" : [
11
],
"name" : "GLTF_SceneRootNode",
"rotation" : [
0.7071068286895752,
0,
0,
0.7071068286895752
]
},
{
"children" : [
12
],
"name" : "root"
},
{
"children" : [
13
],
"name" : "Sketchfab_model",
"rotation" : [
0.9999382495880127,
0,
0,
0.011110424995422363
]
}
],
"materials" : [
{
"extensions" : {
"KHR_materials_unlit" : {}
},
"name" : "default_tex0",
"pbrMetallicRoughness" : {
"baseColorTexture" : {
"index" : 0
},
"metallicFactor" : 0,
"roughnessFactor" : 0.9
}
}
],
"meshes" : [
{
"name" : "Object_6",
"primitives" : [
{
"attributes" : {
"POSITION" : 0,
"NORMAL" : 1,
"TEXCOORD_0" : 2
},
"indices" : 3,
"material" : 0
}
]
},
{
"name" : "Object_7",
"primitives" : [
{
"attributes" : {
"POSITION" : 4,
"NORMAL" : 5,
"TEXCOORD_0" : 6
},
"indices" : 7,
"material" : 0
}
]
},
{
"name" : "Object_8",
"primitives" : [
{
"attributes" : {
"POSITION" : 8,
"NORMAL" : 9,
"TEXCOORD_0" : 10
},
"indices" : 11,
"material" : 0
}
]
},
{
"name" : "Object_9",
"primitives" : [
{
"attributes" : {
"POSITION" : 12,
"NORMAL" : 13,
"TEXCOORD_0" : 14
},
"indices" : 15,
"material" : 0
}
]
},
{
"name" : "Object_10",
"primitives" : [
{
"attributes" : {
"POSITION" : 16,
"NORMAL" : 17,
"TEXCOORD_0" : 18
},
"indices" : 19,
"material" : 0
}
]
},
{
"name" : "Object_0",
"primitives" : [
{
"attributes" : {
"POSITION" : 20,
"NORMAL" : 21,
"TEXCOORD_0" : 22
},
"indices" : 23,
"material" : 0
}
]
},
{
"name" : "Object_1",
"primitives" : [
{
"attributes" : {
"POSITION" : 24,
"NORMAL" : 25,
"TEXCOORD_0" : 26
},
"indices" : 27,
"material" : 0
}
]
},
{
"name" : "Object_2",
"primitives" : [
{
"attributes" : {
"POSITION" : 28,
"NORMAL" : 29,
"TEXCOORD_0" : 30
},
"indices" : 31,
"material" : 0
}
]
},
{
"name" : "Object_3",
"primitives" : [
{
"attributes" : {
"POSITION" : 32,
"NORMAL" : 33,
"TEXCOORD_0" : 34
},
"indices" : 35,
"material" : 0
}
]
},
{
"name" : "Object_4",
"primitives" : [
{
"attributes" : {
"POSITION" : 36,
"NORMAL" : 37,
"TEXCOORD_0" : 38
},
"indices" : 39,
"material" : 0
}
]
},
{
"name" : "Object_5",
"primitives" : [
{
"attributes" : {
"POSITION" : 40,
"NORMAL" : 41,
"TEXCOORD_0" : 42
},
"indices" : 43,
"material" : 0
}
]
}
],
"textures" : [
{
"sampler" : 0,
"source" : 0
}
],
"images" : [
{
"mimeType" : "image/png",
"name" : "default_tex0_baseColor",
"uri" : "default_tex0_baseColor.png"
}
],
"accessors" : [
{
"bufferView" : 0,
"componentType" : 5126,
"count" : 66097,
"max" : [
12.710734367370605,
13.558714866638184,
11.406803131103516
],
"min" : [
-17.897512435913086,
-18.466196060180664,
-1.2060356140136719
],
"type" : "VEC3"
},
{
"bufferView" : 1,
"componentType" : 5126,
"count" : 66097,
"type" : "VEC3"
},
{
"bufferView" : 2,
"componentType" : 5126,
"count" : 66097,
"type" : "VEC2"
},
{
"bufferView" : 3,
"componentType" : 5125,
"count" : 303801,
"type" : "SCALAR"
},
{
"bufferView" : 4,
"componentType" : 5126,
"count" : 66034,
"max" : [
13.505329132080078,
13.4839506149292,
11.503273963928223
],
"min" : [
-17.889217376708984,
-16.84998321533203,
-1.2112312316894531
],
"type" : "VEC3"
},
{
"bufferView" : 5,
"componentType" : 5126,
"count" : 66034,
"type" : "VEC3"
},
{
"bufferView" : 6,
"componentType" : 5126,
"count" : 66034,
"type" : "VEC2"
},
{
"bufferView" : 7,
"componentType" : 5125,
"count" : 274761,
"type" : "SCALAR"
},
{
"bufferView" : 8,
"componentType" : 5126,
"count" : 66108,
"max" : [
17.840431213378906,
17.19841766357422,
11.4932222366333
],
"min" : [
-10.947247505187988,
-18.430957794189453,
-0.3328990936279297
],
"type" : "VEC3"
},
{
"bufferView" : 9,
"componentType" : 5126,
"count" : 66108,
"type" : "VEC3"
},
{
"bufferView" : 10,
"componentType" : 5126,
"count" : 66108,
"type" : "VEC2"
},
{
"bufferView" : 11,
"componentType" : 5125,
"count" : 251397,
"type" : "SCALAR"
},
{
"bufferView" : 12,
"componentType" : 5126,
"count" : 65919,
"max" : [
17.840431213378906,
17.197418212890625,
10.958374977111816
],
"min" : [
-10.688971519470215,
-10.738082885742188,
-0.4571075439453125
],
"type" : "VEC3"
},
{
"bufferView" : 13,
"componentType" : 5126,
"count" : 65919,
"type" : "VEC3"
},
{
"bufferView" : 14,
"componentType" : 5126,
"count" : 65919,
"type" : "VEC2"
},
{
"bufferView" : 15,
"componentType" : 5125,
"count" : 286110,
"type" : "SCALAR"
},
{
"bufferView" : 16,
"componentType" : 5126,
"count" : 43240,
"max" : [
16.400653839111328,
9.60384464263916,
11.539886474609375
],
"min" : [
-10.690116882324219,
-10.723451614379883,
2.420642852783203
],
"type" : "VEC3"
},
{
"bufferView" : 17,
"componentType" : 5126,
"count" : 43240,
"type" : "VEC3"
},
{
"bufferView" : 18,
"componentType" : 5126,
"count" : 43240,
"type" : "VEC2"
},
{
"bufferView" : 19,
"componentType" : 5123,
"count" : 161499,
"type" : "SCALAR"
},
{
"bufferView" : 20,
"componentType" : 5126,
"count" : 65862,
"max" : [
17.840431213378906,
17.13937759399414,
11.513161659240723
],
"min" : [
-11.138651847839355,
-18.437427520751953,
-0.7079963684082031
],
"type" : "VEC3"
},
{
"bufferView" : 21,
"componentType" : 5126,
"count" : 65862,
"type" : "VEC3"
},
{
"bufferView" : 22,
"componentType" : 5126,
"count" : 65862,
"type" : "VEC2"
},
{
"bufferView" : 23,
"componentType" : 5125,
"count" : 327291,
"type" : "SCALAR"
},
{
"bufferView" : 24,
"componentType" : 5126,
"count" : 65774,
"max" : [
11.116039276123047,
16.116790771484375,
11.545400619506836
],
"min" : [
-9.965825080871582,
-17.21584701538086,
0.012727737426757812
],
"type" : "VEC3"
},
{
"bufferView" : 25,
"componentType" : 5126,
"count" : 65774,
"type" : "VEC3"
},
{
"bufferView" : 26,
"componentType" : 5126,
"count" : 65774,
"type" : "VEC2"
},
{
"bufferView" : 27,
"componentType" : 5125,
"count" : 332682,
"type" : "SCALAR"
},
{
"bufferView" : 28,
"componentType" : 5126,
"count" : 65826,
"max" : [
17.70437240600586,
16.521465301513672,
10.887145042419434
],
"min" : [
-10.690116882324219,
-18.405879974365234,
-0.0068569183349609375
],
"type" : "VEC3"
},
{
"bufferView" : 29,
"componentType" : 5126,
"count" : 65826,
"type" : "VEC3"
},
{
"bufferView" : 30,
"componentType" : 5126,
"count" : 65826,
"type" : "VEC2"
},
{
"bufferView" : 31,
"componentType" : 5125,
"count" : 336579,
"type" : "SCALAR"
},
{
"bufferView" : 32,
"componentType" : 5126,
"count" : 65824,
"max" : [
17.845962524414062,
17.131771087646484,
11.309389114379883
],
"min" : [
-10.816953659057617,
-17.223102569580078,
-0.24086952209472656
],
"type" : "VEC3"
},
{
"bufferView" : 33,
"componentType" : 5126,
"count" : 65824,
"type" : "VEC3"
},
{
"bufferView" : 34,
"componentType" : 5126,
"count" : 65824,
"type" : "VEC2"
},
{
"bufferView" : 35,
"componentType" : 5125,
"count" : 328047,
"type" : "SCALAR"
},
{
"bufferView" : 36,
"componentType" : 5126,
"count" : 65915,
"max" : [
17.845962524414062,
14.725859642028809,
10.931208610534668
],
"min" : [
-10.815631866455078,
-18.500919342041016,
-0.2560558319091797
],
"type" : "VEC3"
},
{
"bufferView" : 37,
"componentType" : 5126,
"count" : 65915,
"type" : "VEC3"
},
{
"bufferView" : 38,
"componentType" : 5126,
"count" : 65915,
"type" : "VEC2"
},
{
"bufferView" : 39,
"componentType" : 5125,
"count" : 304359,
"type" : "SCALAR"
},
{
"bufferView" : 40,
"componentType" : 5126,
"count" : 65935,
"max" : [
17.464933395385742,
9.621794700622559,
10.475030899047852
],
"min" : [
-10.55778980255127,
-18.48903465270996,
-0.4479713439941406
],
"type" : "VEC3"
},
{
"bufferView" : 41,
"componentType" : 5126,
"count" : 65935,
"type" : "VEC3"
},
{
"bufferView" : 42,
"componentType" : 5126,
"count" : 65935,
"type" : "VEC2"
},
{
"bufferView" : 43,
"componentType" : 5125,
"count" : 307560,
"type" : "SCALAR"
}
],
"bufferViews" : [
{
"buffer" : 0,
"byteLength" : 793164,
"byteOffset" : 0
},
{
"buffer" : 0,
"byteLength" : 793164,
"byteOffset" : 793164
},
{
"buffer" : 0,
"byteLength" : 528776,
"byteOffset" : 1586328
},
{
"buffer" : 0,
"byteLength" : 1215204,
"byteOffset" : 2115104
},
{
"buffer" : 0,
"byteLength" : 792408,
"byteOffset" : 3330308
},
{
"buffer" : 0,
"byteLength" : 792408,
"byteOffset" : 4122716
},
{
"buffer" : 0,
"byteLength" : 528272,
"byteOffset" : 4915124
},
{
"buffer" : 0,
"byteLength" : 1099044,
"byteOffset" : 5443396
},
{
"buffer" : 0,
"byteLength" : 793296,
"byteOffset" : 6542440
},
{
"buffer" : 0,
"byteLength" : 793296,
"byteOffset" : 7335736
},
{
"buffer" : 0,
"byteLength" : 528864,
"byteOffset" : 8129032
},
{
"buffer" : 0,
"byteLength" : 1005588,
"byteOffset" : 8657896
},
{
"buffer" : 0,
"byteLength" : 791028,
"byteOffset" : 9663484
},
{
"buffer" : 0,
"byteLength" : 791028,
"byteOffset" : 10454512
},
{
"buffer" : 0,
"byteLength" : 527352,
"byteOffset" : 11245540
},
{
"buffer" : 0,
"byteLength" : 1144440,
"byteOffset" : 11772892
},
{
"buffer" : 0,
"byteLength" : 518880,
"byteOffset" : 12917332
},
{
"buffer" : 0,
"byteLength" : 518880,
"byteOffset" : 13436212
},
{
"buffer" : 0,
"byteLength" : 345920,
"byteOffset" : 13955092
},
{
"buffer" : 0,
"byteLength" : 322998,
"byteOffset" : 14301012
},
{
"buffer" : 0,
"byteLength" : 790344,
"byteOffset" : 14624012
},
{
"buffer" : 0,
"byteLength" : 790344,
"byteOffset" : 15414356
},
{
"buffer" : 0,
"byteLength" : 526896,
"byteOffset" : 16204700
},
{
"buffer" : 0,
"byteLength" : 1309164,
"byteOffset" : 16731596
},
{
"buffer" : 0,
"byteLength" : 789288,
"byteOffset" : 18040760
},
{
"buffer" : 0,
"byteLength" : 789288,
"byteOffset" : 18830048
},
{
"buffer" : 0,
"byteLength" : 526192,
"byteOffset" : 19619336
},
{
"buffer" : 0,
"byteLength" : 1330728,
"byteOffset" : 20145528
},
{
"buffer" : 0,
"byteLength" : 789912,
"byteOffset" : 21476256
},
{
"buffer" : 0,
"byteLength" : 789912,
"byteOffset" : 22266168
},
{
"buffer" : 0,
"byteLength" : 526608,
"byteOffset" : 23056080
},
{
"buffer" : 0,
"byteLength" : 1346316,
"byteOffset" : 23582688
},
{
"buffer" : 0,
"byteLength" : 789888,
"byteOffset" : 24929004
},
{
"buffer" : 0,
"byteLength" : 789888,
"byteOffset" : 25718892
},
{
"buffer" : 0,
"byteLength" : 526592,
"byteOffset" : 26508780
},
{
"buffer" : 0,
"byteLength" : 1312188,
"byteOffset" : 27035372
},
{
"buffer" : 0,
"byteLength" : 790980,
"byteOffset" : 28347560
},
{
"buffer" : 0,
"byteLength" : 790980,
"byteOffset" : 29138540
},
{
"buffer" : 0,
"byteLength" : 527320,
"byteOffset" : 29929520
},
{
"buffer" : 0,
"byteLength" : 1217436,
"byteOffset" : 30456840
},
{
"buffer" : 0,
"byteLength" : 791220,
"byteOffset" : 31674276
},
{
"buffer" : 0,
"byteLength" : 791220,
"byteOffset" : 32465496
},
{
"buffer" : 0,
"byteLength" : 527480,
"byteOffset" : 33256716
},
{
"buffer" : 0,
"byteLength" : 1230240,
"byteOffset" : 33784196
}
],
"samplers" : [
{
"magFilter" : 9729,
"minFilter" : 9987,
"wrapS" : 33071,
"wrapT" : 33071
}
],
"buffers" : [
{
"byteLength" : 35014436,
"uri" : "scene.bin"
}
]
}

107
index.html
View File

@ -1,68 +1,73 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AR Menu</title> <title>AR Menu</title>
<!-- <link rel="stylesheet" href="assets/style/style.css"> </link> --> <!-- <link rel="stylesheet" href="assets/style/style.css"> </link> -->
<style>html, <style>
body { html,
width: 100%; body {
height: 100vh; width: 100%;
overflow: hidden; height: 100vh;
margin: 0px; overflow: hidden;
padding: 0px; margin: 0px;
border: none; padding: 0px;
} border: none;
}
iframe { iframe {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
border: none; border: none;
} }
.menu-item { .menu-item {
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
} }
.menu-item img { .menu-item img {
width: 100px; width: 100px;
height: 100px; height: 100px;
display: block; display: block;
} }
#iframe-container { #iframe-container {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
border: none; border: none;
display: none; display: none;
}</style> }
</style>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.min.js"></script>
</head> </head>
<body> <body>
<div id="iframe-container"> <div id="iframe-container">
<button id="button" onclick="closeSelf()" style="background-color: aqua; z-index: 3;">Go Back</button> <button
<iframe id="ar-frame" src="" width="300" height="200"></iframe> id="button"
onclick="closeSelf()"
style="background-color: aqua; z-index: 3"
>
Go Back
</button>
<iframe id="ar-frame" src="" width="300" height="200"></iframe>
</div> </div>
<div id="menu"> <div id="menu">
<!-- Menu items will be inserted here --> <!-- Menu items will be inserted here -->
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
<script src="rotation_limit.js"></script>
</body>
</body>
</html> </html>

43
script.js
View File

@ -1,37 +1,34 @@
const menuItems = [ const menuItems = [
{ { name: "ar1.html", photo: "path/to/photo1.jpg", price: "$10" },
name: "Cappuccino", { name: "ar2.html", photo: "path/to/photo2.jpg", price: "$15" },
photo: "assets/Pictures/Cappocino.png", { name: "ar3.html", photo: "path/to/photo3.jpg", price: "$20" }
price: "10 E.G.P",
},
{ name: "Tagen", photo: "assets/Pictures/Tagen.png", price: "40 E.G.P" },
]; ];
const menu = document.getElementById("menu"); const menu = document.getElementById('menu');
menuItems.forEach((item) => { menuItems.forEach(item => {
const itemDiv = document.createElement("div"); const itemDiv = document.createElement('div');
itemDiv.className = "menu-item"; itemDiv.className = 'menu-item';
itemDiv.innerHTML = ` itemDiv.innerHTML = `
<img src="${item.photo}" alt="${item.name}"> <img src="${item.photo}" alt="${item.name}">
<p>${item.name}</p> <p>${item.name}</p>
<p>${item.price}</p> <p>${item.price}</p>
`; `;
itemDiv.addEventListener("click", () => { itemDiv.addEventListener('click', () => {
spawnIframe(item.name); spawnIframe(item.name);
}); });
menu.appendChild(itemDiv); menu.appendChild(itemDiv);
}); });
function spawnIframe(itemName) { function spawnIframe(itemName) {
const iframeContainer = document.getElementById("iframe-container"); const iframeContainer = document.getElementById('iframe-container');
const iframe = document.getElementById("ar-frame"); const iframe = document.getElementById('ar-frame');
iframe.src = "assets/arTab/" + itemName + ".html"; // Path to the AR app iframe.src = 'assets/arTab/'+itemName; // Path to the AR app
iframeContainer.style.display = "block"; iframeContainer.style.display = 'block';
} }
function closeSelf() { function closeSelf(){
const iframeContainer = document.getElementById("iframe-container"); const iframeContainer = document.getElementById('iframe-container');
const iframe = document.getElementById("ar-frame"); const iframe = document.getElementById('ar-frame');
iframeContainer.style.display = "none"; iframeContainer.style.display = 'none';
} }