使用 AR.js（增强现实）显示 HTML 元素答案

【问题标题】：Display HTML Element with AR.js (Augmented Reality)使用 AR.js（增强现实）显示 HTML 元素
【发布时间】：2019-01-12 15:05:11
【问题描述】：

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

代码如下。并且 AR 运行良好。

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

我该怎么做？

演示网址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>

【问题讨论】：

How to detect when marker is found in AR.js的可能重复

标签： augmented-reality aframe ar.js

【解决方案1】：

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

【讨论】：