trying to use AR.JS to display jpeg image and only when a button is clicked
Question
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>
1 answers
solution1
2 ACCPTED 2018-09-27 22:21:41
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.