尝试使用 AR.JS 显示 jpeg 图像并且仅在单击按钮时显示

Question

我正在从事电子商务项目，我想在其中使用 AR.JS 显示图像。图像是普通的二维 jpeg。我只想能够显示在我的背景上。我已经构建了一个模态并在其中包含了 A 型框架。图像旋转显示，而不是在主图像的顶部。

其次，代码自动呈现在整个页面上，而不仅仅是模式。有没有办法只在模态出现时渲染它，然后用模态关闭它。

非常感谢您的帮助。

打开模式

<!-- Modal or popup -->

 <div id="myModal" class="modal">


  <!-- Modal content -->
  <div class="modal-content">
    <span  id="myModalclose" class="close">&times;</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>

Answer 1

下面的代码运行良好

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

尝试使用 AR.JS 显示 jpeg 图像并且仅在单击按钮时显示

trying to use AR.JS to display jpeg image and only when a button is clicked

html

javascript

jpeg

augmented-reality

ar.js