I am working on a Ecommerce project where I would like to display an image using AR.JS. the image is normal 2-d jpeg. I just want to be able to display on my background. I have built a modal and include the A-frame inside it. The image is displayed rotated and not on the top of the hero image.
Second the code is rendered automatically on the entire page and not just the modal. is there a way to rendered it only when the modal shows up, and then close it with the modal.
Thanks greatly in advance for your help.
Open Modal
<!-- Modal or popup -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="myModalclose" class="close">×</span>
</div>
<a-scene embedded arjs>
<a-assets>
<img id="transpImage" src="${productFullImage}" alt="<c:out value="${fullImageAltDescription}" escapeXml="${env_escapeXmlFlag}"/>" title="<c:out value="${fullImageAltDescription}" escapeXml="${env_escapeXmlFlag}"/>" class="product_main_image"/>
</a-assets>
<a-image rotation="0 0 0" src="#transpImage"></a-image>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
//var span = document.getElementsByClassName("close1")[0];
var span = document.getElementById("myModalclose");
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
The code below worked very well
<head>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded="" arjs="trackingMethod: best;" class="" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="">
<a-marker preset="hiro" id="aframe-scene" position="" rotation="" scale="" visible="" material="" arjs-anchor="" arjs-hit-testing="">
<a-image id="test" src="yourimage.png" position="0 0 0" rotation="-90 0 0" width="" height="" opacity="1" transparent="true" alpha-test="0.2" shader="standard" scale="1 1 1" visible="" material="" geometry=""></a-image>
</a-marker>
</a-scene>
</body>