1

I want display HTML Element with AR.js.

The code is below. and AR is working well.

But, 'Hello world' div element has been displayed always! I want to hide this div element. and only display it when the marker is detected.

How can I do it？

demo URL https://pano-mixer360.com/sandbox/demo

marker: Hiro

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= javascript_include_tag "vendor-js/aframe/dist/aframe-v0.6.0.min.js", media: "all" %>
  <%= javascript_include_tag "vendor-js/html2canvas/dist/html2canvas.min.js", media: "all" %>
  <%= javascript_include_tag "vendor-js/aframe-html-shader/dist/aframe-html-shader.min.js", media: "all" %>
  <%= javascript_include_tag "vendor-js/aframe-mouse-cursor-component/dist/aframe-mouse-cursor-component.min.js", media: "all" %>
</head>
<body style="margin:0px; overflow:hidden;">
<!-- load AR.js -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

<div id="profile" style="color: greenyellow; width: 300px; height: 300px; background-color: red; position: absolute; top: 00px; left: 0;">
Hello world!
</div>

<!-- set AR.js to AFrame -->
<a-scene embedded arjs="debugUIEnabled:false;">
  <!-- set marker -->
  <a-marker preset="hiro">
    <a-plane position="0.43 1.17 -1.48" rotation="-72 85 -88" scale="1 1 1" material="shader:html;target: #profile;"></a-plane>
  </a-marker>

  <!-- set camera -->
  <a-entity camera></a-entity>
</a-scene>
</body>
</html>
Jonathan Leffler
  • 730,956
  • 141
  • 904
  • 1,278
user3812919
  • 31
  • 4
  • Possible duplicate of [How to detect when marker is found in AR.js](https://stackoverflow.com/questions/44799413/how-to-detect-when-marker-is-found-in-ar-js) – Piotr Adam Milewski Aug 07 '18 at 08:13

3 Answers3

0

Just put it behind the canvas element by adding z-index: -2 to the div element's style.

ArtBIT
  • 3,931
  • 28
  • 39
0

You should use this component https://github.com/supereggbert/aframe-htmlembed-component.

For example try to add this to the a-scene.

<a-entity  htmlembed>

<div id="profile" style="color: greenyellow; width: 300px; height: 300px; background-color: red; position: absolute; top: 00px; left: 0;">
Hello world!
</div>

</a-entity>
Bbbgl
  • 9
  • 2
0

html:

<div class="helloworld">Hello world!</div>

css:

<style>
.helloworld {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  color: greenyellow; 
  width: 300px; 
  height: 300px; 
  background-color: red; 
  position: absolute; 
  top: 00px; left: 0;
}

if you want it to do interactions with javascript you should use window.onload

ByOSMA
  • 11
  • 2