Go to THIS LINK with your smart phone, and then hoover over the image below:
(Does THIS LINK work better?)
The idea is to go to the LINK, then hoover your phone over an image, to see an Augmented Reality object in 3D. I did this following the MindAR tutorial online.
HTML CODE
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://aframe.io/releases/1.5.0/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; showStats: true;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<img id="card" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1fI4uuHgrhKl-1cbWEvZVf6CANTlyWQJMc0uVPblCsa6HyKcF5tBDXtxqBzmknDxtPpygP78BgJ0CuXU6XhsP_7QY_4X1WXFBXSaxwXoSw-IaUYQlVP8lEyWnknI0-jdfosttmSEAStTkSudkKW6XMRv7Rd8GRGVuKvT0DxCRWJfSWC_S0JfIBtAiwz3O/w640-h630/001__Karl_Whitaker.jpg" />
<a-asset-item id="avatarModel" src="https://pages.swcp.com/~krrrl/Alien_javelina/Alien javelina.glb"></a-asset-item>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
<a-entity mindar-image-target="targetIndex: 0">
<a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
<a-gltf-model rotation="0 0 0 " position="0 0 0.1" scale="0.005 0.005 0.005" src="#avatarModel" animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate">
</a-entity>
</a-scene>
</body>
</html>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.