2017-12-02 110 views
1

我只想用Hiro标记在我的网页浏览器上显示AR.js(增强现实)的PNG文件!但结果是一个黑盒子,我不明白这个问题。用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> 

回答

0

如果图像是不是你的服务器上,你可能会得到一个错误CORS,这意味着你的网站是不是能得到回应(或者被拒绝)试图使用XHR来获取图像。您可以在框架FAQ以及资​​产管理subpage中阅读更多信息。 TLDR - three.js/aframe不会让您从不安全的主机加载图像。

确保图像在您的服务器上,或在安全的网站上找到图像(这是一个很大的简化,但大多数https://*为我工作)。

A-框架建议使用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错误。