名刺からARが飛び出してきたらカッコいい！
そう思って、AR名刺を作ってみました！
名刺から猫ちゃんが飛び出してきて、とっても可愛い。
ARの実装にあたっては、AR.jsというJavaScriptのライブラリを使用しています。
scriptタグで埋め込めば、HTMLだけで完結するので github.io にお手軽公開することもできます。
書いたコードはたったこれだけです（3dモデルは別に必要）
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene
cursor="rayOrigin: mouse"
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<a-assets>
<a-asset-item id="cat-obj" src="./cat.obj"></a-asset-item>
<a-asset-item id="cat-mtl" src="./cat.mtl"></a-asset-item>
</a-assets>
<a-marker type="pattern" url="./apple.patt">
<a-entity>
<a-obj-model
position="0 0 0"
scale="0.05 0.05 0.05"
rotation="270 0 0"
src="#cat-obj"
mtl="#cat-mtl"
id="sample"
>
</a-obj-model>
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
<script>
function boxClick() {
window.location.href = "https://hiroki-yod.com";
}
let box = document.getElementById('sample');
box.addEventListener('click', boxClick);
</script>
</body>
</html>
これからリアルでお会いする方はぜひAR名刺を受け取ってもらえると嬉しいです。
以上、AR名刺を作ろう！でした。