AR.js（Augmented Reality）でPNG画像ファイルを表示

ヒロマーカーを使ってWebブラウザに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のA枠と資産管理 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エラーに関する上記のすべてを確認しました。

出典

2017-12-04 08:21:27

AR.js（Augmented Reality）でPNG画像ファイルを表示

答えて

関連する問題