Q&A
実現したいこと
WebARのマーカーがうまく反応しないです。
QRコードにアイコンを真ん中に表示する事ができると思いますが、
そこにARマーカーを付けて、QRでWebブラウザを開いてカメラを
起動させ、そのまま真ん中の小さなARマーカーにカメラをかざせば、
ARが表示されます。
実際に下記のWebARの解説記事にもその方法が書かれていて、
ARマーカーとQRコードが一体になってるのでデザインする時
スペースが節約できて便利です。
でも実際、やってみると全然、ARが反応してくれません。
QRコードの点の部分やARマーカーの縁の部分を黒やはっきりした
色にしても反応しません。
ARが表示されたいです。私の場合は画像や動画です。
「参考サイト」
AR.jsを使ってWebAR年賀状を作る 2020年版
該当のソースコード
</section> </body> </html><!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" /> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script> <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script> <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script> <a-assets> <video id="vid" src="assets/asset.mp4" preload="auto" response-type="arraybuffer" loop crossorigin webkit-playsinline muted playsinline ></video> <audio src="videopath" autoplay></audio> </a-assets> <a-marker type="pattern" preset="custom" url="assets/marker.patt" videohandler smooth="true" smoothCount="10" smoothTolerance="0.01" smoothThreshold="5" raycaster="objects: .clickable" emitevents="true" cursor="fuse: false; rayOrigin: mouse;" id="markerA" > <a-video link="href: https://twitter.com/naive_kazama" animation-mixer="loop:repeat" src="#vid" width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true" class="clickable" gesture-handler ></a-video> </a-marker> <a-entity camera></a-entity> </a-scene>
試したこと
逆にARマーカーの中にQRコードを入れてQRコードごと
ARマーカーにしれしまうパターンでは比較的反応しやすかったです。
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー