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-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-scene>

26
assets/arTab/ar2.html
View File

@ -6,15 +6,27 @@
<script src="smooth_script.js"></script>
</head>
<body id="gamed" style="margin: 0px; overflow: hidden">
<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-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" 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-scene>
</body>
</html>

26
assets/arTab/ar3.html
View File

@ -6,15 +6,27 @@
<script src="smooth_script.js"></script>
</head>
<body id="gamed" style="margin: 0px; overflow: hidden">
<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-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="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-scene>
</body>
</html>

107
index.html
View File

@ -1,68 +1,73 @@
<!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,
body {
width: 100%;
height: 100vh;
overflow: hidden;
margin: 0px;
padding: 0px;
border: none;
}
<style>
html,
body {
width: 100%;
height: 100vh;
overflow: hidden;
margin: 0px;
padding: 0px;
border: none;
}
iframe {
width: 100%;
height: 100vh;
overflow: hidden;
margin: 0px;
padding: 0px;
border: none;
}
iframe {
width: 100%;
height: 100vh;
overflow: hidden;
margin: 0px;
padding: 0px;
border: none;
}
.menu-item {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
display: inline-block;
cursor: pointer;
}
.menu-item {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
display: inline-block;
cursor: pointer;
}
.menu-item img {
width: 100px;
height: 100px;
display: block;
}
.menu-item img {
width: 100px;
height: 100px;
display: block;
}
#iframe-container {
width: 100%;
height: 100vh;
overflow: hidden;
margin: 0px;
padding: 0px;
border: none;
display: none;
}</style>
#iframe-container {
width: 100%;
height: 100vh;
overflow: hidden;
margin: 0px;
padding: 0px;
border: none;
display: none;
}
</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>
<iframe id="ar-frame" src="" width="300" height="200"></iframe>
<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 -->
<!-- Menu items will be inserted here -->
</div>
<script src="script.js"></script>
</body>
<script src="rotation_limit.js"></script>
</body>
</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);
}
});