- 投稿日：2023年08月17日 23時30分27秒
- 更新日：2023年08月17日 23時50分20秒
WEB AR開発 A-Frame AR.js
最初に
知り合いのデザイナさんから「ARマーカーを入れたチラシを作りたいって方がいるけどできる？」って聞かれて調査したWEB ARについて。
聞いていた予定を2ヶ月も過ぎたのでもう発注されることはないだろうから供養も込めて。
画像を表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ARテスト</title>
<!-- AFRAME読み込み -->
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<!-- AR.js読み込み -->
<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/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
</head>
<body style="margin : 0px; overflow: hidden;">
<!-- ライブラリの読み込みが完了するまでのローディングメッセージ -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene embedded vr-mode-ui="enabled:false;" arjs="debugUIEnabled:true; detectionMode: mono_and_matrix; matrixCodeType: 3x3; patternRatio:0.6">
<!-- 名刺の画像を準備 -->
<a-assets>
<img id="front" src="[表示したい画像のURL]" />
</a-assets>
<!-- マーカーのタグの中に表示させたいオブジェクトをマークアップする -->
<a-marker type='pattern' url='[マーカーファイルのURL]'>
<a-plane
position="0 .75 0"
rotation="-90 0 0"
width="1.75"
material="src: #front;">
</a-plane>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>説明
画像をARマーカーに重ねて表示します。
動画を再生したいとき
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- A-Frameを読み込む -->
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<!-- AR.jsを読み込む -->
<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/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
</head>
<body style="margin: 0; overflow: hidden">
<!-- シーンの作成、VRモードのUI非表示 -->
<a-scene embedded arjs vr-mode-ui="enabled: false">
<a-assets>
<video id="video" webkit-playsinline playsinline loop="true" src="[mp4ファイル]"></video>
</a-assets>
<!-- マーカーのタグの中に表示させたいオブジェクトをマークアップする -->
<a-marker type='pattern' url='[マーカーファイル]'>
<!--
<a-plane
position="0 0 0"
rotation="-90 0 0"
material="src: #video;">
</a-plane>
-->
<a-video src="#video" width="8" height="4.5" position="0 0 0" rotation="-90 0 0"></a-video>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>説明
こちらは動画を再生します。
※なかなかうまく再生するのは難しいようです。手ぶれ？
最後に
以外に簡単にできるなってのが素直な感想でした。
ただ端末毎のカメラの性能や、音楽が含まれたものをiPhoneで再生することができないなど課題はあるみたい。それでも夢があるよね。
いつかはオフィスを借りて、ARで僕と写真が取れるとか作ってみたいです（作らないです）。
