名刺から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名刺を作ろう！でした。