2

我只想在我的网络浏览器上使用 Hiro 标记显示一个带有 AR.js（增强现实）的 PNG 文件！但结果是一个黑匣子，我不明白这个问题。

谢谢你的帮助 Benoit

<!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>
4

1 回答 1

2

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

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

确保图像在您的服务器上，或者在安全网站上找到图像（这是一个很大的简化，但https://*对我来说大部分工作）。

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

这是我的小提琴，你可以看到它与 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 错误的信息。

于 2017-12-04T08:21:27.693 回答