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

Update SCript

This commit is contained in:
omar salah 2024-06-14 02:06:20 +03:00
parent 38e389606a
commit 0a1a4957f1
5 changed files with 116 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/arTab/ar1.html
View File

@ -12,7 +12,9 @@
<a-box id="second-box-as-comparison" position="0 0 0" material="opacity: 0"></a-box> <a-box id="second-box-as-comparison" position="0 0 0" material="opacity: 0"></a-box>
</a-marker> </a-marker>
<a-entity id="smoothed-box" position="0 0 0" scale="2 2 2" gltf-model="cup_of_cappuccino/scene.gltf"></a-entity> <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-entity camera></a-entity>
</a-scene> </a-scene>

26
assets/arTab/ar2.html
View File

@ -6,15 +6,27 @@
<script src="smooth_script.js"></script> <script src="smooth_script.js"></script>
</head> </head>
<body id="gamed" style="margin: 0px; overflow: hidden"> <body id="gamed" style="margin: 0px; overflow: hidden">
<a-scene embedded arjs='patternRatio:0.8;'> <a-scene embedded arjs="patternRatio:0.8;">
<a-marker
<a-marker lerpsmooth id="marker" type="pattern" url="pattern-WebAR_QR.patt"> lerpsmooth
<a-box id="second-box-as-comparison" position="0 0 0" material="opacity: 0"></a-box> 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-marker>
<a-entity id="smoothed-box" position="0 0 0" scale="5 5 5" gltf-model="cup_of_cappuccino/scene.gltf"></a-entity> <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-entity camera></a-entity>
</a-scene> </a-scene>
</body> </body>
</html> </html>

26
assets/arTab/ar3.html
View File

@ -6,15 +6,27 @@
<script src="smooth_script.js"></script> <script src="smooth_script.js"></script>
</head> </head>
<body id="gamed" style="margin: 0px; overflow: hidden"> <body id="gamed" style="margin: 0px; overflow: hidden">
<a-scene embedded arjs='patternRatio:0.8;'> <a-scene embedded arjs="patternRatio:0.8;">
<a-marker
<a-marker lerpsmooth id="marker" type="pattern" url="pattern-WebAR_QR.patt"> lerpsmooth
<a-box id="second-box-as-comparison" position="0 0 0" material="opacity: 0"></a-box> 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-marker>
<a-entity id="smoothed-box" position="0 0 0" scale="8 8 8" gltf-model="cup_of_cappuccino/scene.gltf"></a-entity> <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-entity camera></a-entity>
</a-scene> </a-scene>
</body> </body>
</html> </html>

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>

12
rotation_limit.js Normal file
View File

@ -0,0 +1,12 @@
AFRAME.registerComponent('rotation-limiter', {
tick: function () {
var el = this.el;
var rotation = el.getAttribute('rotation');
rotation.x = Math.max(0, Math.min(90, rotation.x));
rotation.y = Math.max(0, Math.min(90, rotation.y));
rotation.z = Math.max(0, Math.min(90, rotation.z));
el.setAttribute('rotation', rotation);
}
});