我有一个 AR.JS 设置,我正在使用 aframe html 着色器插件将 HTML 作为纹理渲染到我的飞机上。我有一个问题,在接受相机权限之前加载视图时,我可以看到 HTML 代码,当我接受相机权限时,相机会加载并且我无法再看到它,直到我使用使用 HTML 的 AR 标记然后它正确显示。有什么办法可以解决这个问题吗?我在想也许会一直听,直到相机被接受,然后显示 html 否则将其隐藏(然后它将永远不会显示),但我不确定如何使这项工作或是否可能。
有什么解决办法吗?
谢谢
<!-- include a-frame -->
<script src="vendor/aframe/build/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"></script>
<!-- include ar.js for aframe -->
<script src='../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../three.js/'</script>
<script>document.addEventListener('click', evt => document.querySelector('video').play());
</script>
<!-- start the body of your page -->
<body style='margin : 0px; overflow: hidden;'>
<!-- add some info at the top of the page -->
<div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1; color:white; font-size:30px;'>
<a>Prototype ALL</a>
</div>
<!-- Define your 3d scene and enabled ar.js -->
<a-scene embedded arjs='sourceType: webcam; detectionMode: mono; trackingMethod: best; debugUIEnabled: false;'>
<a-assets>
<video id="video" autoplay loop="true" src="video.mp4"> </video>
</a-assets>
<!-- Create a anchor to attach your augmented reality -->
<a-marker preset='custom' type='pattern' url='qrvideo.patt'>
<a-video src="#video" width="1.8" height="1" rotation="270 0 0"> </a-video>
</a-marker>
<a-marker preset='custom' type='pattern' url='qrcode.patt'>
<a-entity geometry="primitive: plane; width: 2; height: 0.5" rotation="-90 0 0" material="shader: html; target: #htmlElement"></a-entity>
</a-marker>
<!-- add marker here -->
<!-- Define a static camera -->
<a-entity camera></a-entity>
</a-scene>
<!-- custom html rendering -->
<div style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -2; overflow: hidden">
<div id="htmlElement" style="background: #F8F8F8; color: #333; font-size: 48px">testing1</div>
</div>
</body>