使用 AR.js（增强现实）显示 PNG 图像文件

【问题标题】：Display PNG image file with AR.js (Augmented Reality)使用 AR.js（增强现实）显示 PNG 图像文件
【发布时间】：2018-05-16 13:08:06
【问题描述】：

我只想在我的网络浏览器上使用 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>

【问题讨论】：

标签： augmented-reality aframe ar.js

【解决方案1】：

TLDR - three.js/aframe 不会让您从不安全的主机加载图像。

如果图像不在您的服务器上，您可能会收到CORS 错误，这意味着您的网站无法获得响应（或被拒绝）尝试使用XHR 获取图像。您可以在 a-frame FAQ 和资产管理 subpage 中了解更多信息。

确保图像在您的服务器上，或在安全网站上查找图像（这是一个很大的简化，但大多数 https://* 对我有用）。

A-frame推荐使用github作为部署平台，也可以使用glitch.me

Here 是我的小提琴，你可以看到它与 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 错误的所有内容。

【讨论】：