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"
}
]
}

31
index.html
View File

@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AR Menu</title>
<!-- <link rel="stylesheet" href="assets/style/style.css"> </link> -->
<style>html,
<style>
html,
body {
width: 100%;
height: 100vh;
@ -47,22 +47,27 @@
padding: 0px;
border: none;
display: none;
}</style>
}
</style>
<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>
</head>
</head>
<body>
<body>
<div id="iframe-container">
<button id="button" onclick="closeSelf()" style="background-color: aqua; z-index: 3;">Go Back</button>
<button
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 id="menu">
<!-- Menu items will be inserted here -->
</div>
<script src="script.js"></script>
</body>
<script src="rotation_limit.js"></script>
</body>
</html>

35
script.js
View File

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