我只想在我的网络浏览器上使用 Hiro 标记显示带有 AR.js(增强现实)的 PNG 文件!但结果是一个黑匣子，我不明白问题所在。
谢谢你的帮助 伯努瓦
<!DOCTYPE html>
<html>
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-assets>
<img id="transpImage" src="http://www.icone-png.com/png/13/13081.png">
</a-assets>
<a-image width="1" height="1" src="#transpImage"></a-image>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
</html>
最佳答案
TLDR - Three.js/aframe 不会让您从不安全的主机加载图像。
如果图像不在您的服务器上，您可能会得到 CORS错误，这意味着您的网站在尝试使用 XHR 获取图像时无法获得响应(或被拒绝) 。您可以在 a 框架 FAQ 中阅读更多相关内容。 ，并在 Assets 管理subpage 。
确保图像位于您的服务器上，或者在安全网站上找到图像(这是一个很大的简化，但大多数 https://* 对我有用)。
A型框架建议使用github作为部署平台，您还可以使用glitch.me
Here是我的 fiddle ，你可以看到它与 AR.js 无关。
检查控制台，您应该看到:
Loading mixed (insecure) display content “http://www.icone-png.com/png/13/13081.png” on a secure page[Learn More]
three.js:30486:3 components:texture:error `$s` could not be fetched (Error code: undefined; Response: undefined)
确认上述所有有关 CORS 错误的信息。
关于augmented-reality - 使用 AR.js(增强现实)显示 PNG 图像文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47610133/