用AR.js (增强现实)显示HTML元素
用AR.js (增强现实)显示HTML元素
提问于 2018-08-05 12:32:12
我想用AR.js显示HTML元素。
代码在下面。AR工作得很好。
但是，“Hello”div元素一直被显示！我想隐藏这个div元素。只有在检测到标记时才显示它。
我该怎么做呢？
演示URL 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>回答 3
Stack Overflow用户
发布于 2019-09-22 09:44:33
只需将z-index: -2添加到div元素的样式中，就可以将其放在画布元素后面。
Stack Overflow用户
发布于 2022-05-10 20:53:36
您应该使用这个组件https://github.com/supereggbert/aframe-htmlembed-component。
例如，尝试将其添加到a场景中。
<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>Stack Overflow用户
发布于 2022-05-24 13:04:42
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;
}如果您希望它与javascript进行交互，则应该使用window.onload
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51694334
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号