MINDAR Augmented Reality works now -- after going to THIS LINK and hoovering over the target image below with your smart phone:
.png)
The AR Target image
With this solution, I can now host the MINDAR Experiences on the SERVER OF MY CHOICE.
2) I used another A-Frame JAVA SCRIPT -- putting in the following line:
3) The GLB file for AR was TOO SMALL, so I increased the "scale" size:
4) Lastly I got RID OF THE PLANE, which was superimposing the target image on top of the target image:
SOLUTION
ChatGPT paced me through the solution, where I made four changes in the HTML code:
1) I added the CLOSING TAG:
- </a-glft-model>
- <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
- <a-gltf-model src="#avatarModel" scale="1 1 1" position="0 0 0.5"></a-gltf-model>
<a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
THE WORKING
HTML CODE
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
</head>
<body>
<a-scene mindar-image="imageTargetSrc: targets.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="avatarModel" src="Paperpose.glb"></a-asset-item>
<img id="card" src="tar.png" />
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity mindar-image-target="targetIndex: 0">
<a-gltf-model
src="#avatarModel"
scale="1 1 1"
position="0 0 0.5">
</a-gltf-model>
</a-entity>
</a-scene>
</body>
</html>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.