1

我想用 AR.js 显示 HTML 元素。

代码如下。AR 运行良好。

但是，'Hello world' div 元素一直显示！我想隐藏这个 div 元素。并且仅在检测到标记时显示它。

怎么办？</p>

演示网址https://pano-mixer360.com/sandbox/demo

标记：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>
4

1 回答 1

0

z-index: -2只需通过添加到 div 元素的样式将其放在 canvas 元素后面。

于 2019-09-22T09:44:33.183 回答