1

AR.jsでHTML要素を表示したい。

コードは以下です。そしてARはうまく機能しています。

しかし、「Hello world」の div 要素は常に表示されています。この div 要素を非表示にしたい。マーカーが検出されたときにのみ表示します。

</p>

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

マーカー：ヒロ

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

1 に答える 1

0

z-index: -2div 要素のスタイルに追加して、canvas 要素の後ろに配置するだけです。

于 2019-09-22T09:44:33.183 に答える