AR.js (Augmented Reality)로 PNG 이미지 파일 표시

HiL 마커가있는 웹 브라우저에 AR.js (Augmented Reality)로 PNG 파일을 표시하고 싶습니다. 그러나 그 결과는 블랙 박스이며 문제를 이해하지 못합니다. 이미지가 서버에없는 경우 벤와AR.js (Augmented Reality)로 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>

출처

2017-12-02 Benoît de Mijolla

을 도움을

당신은 아마 당신의 웹 사이트가 응답을 얻을 수없는 의미 (또는 거부 가져옵니다 CORS 오류를 얻을, 감사) XHR을 사용하여 이미지를 얻으려고합니다. 자세한 내용은 FAQ 및 자산 관리 subpage에서 확인할 수 있습니다. TLDR - three.js/aframe을 사용하면 안전하지 않은 호스트에서 이미지를로드 할 수 없습니다.

이미지가 서버에 있는지 확인하거나 보안 웹 사이트에서 이미지를 찾으십시오 (큰 단순화이지만 대부분 https://*이 효과적입니다). , 당신은 또한, glitch.me

Here 내 바이올린입니다 사용할 수 있습니다 당신은이 AR.js. 관련이없는 것 볼 수있는

A-프레임은 배포 플랫폼으로 github을 사용하는 것이 좋습니다

체크 아웃 콘솔, 당신은 볼 수 :

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-04 08:21:27

AR.js (Augmented Reality)로 PNG 이미지 파일 표시

답변

관련 문제