AR画像 を 年賀状 に!AR.jsで簡単に実装する方法

みなさん、今年の年賀状はお済みですか?まだだけどソフトが無いよという方、ワードとエクセルでも簡単に作成できます。

今年は、AR.js で AR画像 の埋め込みを試してみました。今回はこちらのサイトを参考にさせて頂きました。

3DモデルはGoogle Polyで無料配布されているものを使用、マーカー(.patt)はこちらのサイトで作成しました。

https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

出来上がったコードがこちら。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Happy New Year!</title>
  </head>
  <body style="margin:0px; overflow:hidden;">
    <!-- A-Frame ライブラリの読み込み -->
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
    <!-- AR.js ライブラリの読み込み -->
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

    <!-- A-Frame の VR空間に AR.js を紐づける(デバッグUIは非表示) -->    
    <a-scene embedded arjs="debugUIEnabled:false;">

        <a-assets>
          <a-asset-item id="obj" src="models/model.obj"></a-asset-item> <!-- objファイル -->
          <a-asset-item id="mtl" src="models/materials.mtl"></a-asset-item> <!-- mtlファイル -->           
        </a-assets>

        <a-marker preset='custom' type='pattern' url="marker/marker.patt">
          <a-text value="Happy New Year!\nBest wishes for a successful\nand rewarding year." position=" 0 0 1.5" align="center" rotation="-90 0 0" color="#DD4827" scale="1.5 1.5 1.5"></a-text>
          <a-obj-model
            src="#obj"
            mtl="#mtl"
            scale="5 5 5"
            position="0 0.5 0">
            <a-animation
              attribute="rotation"
              to="0 360 0"
              dur="12000"
              easing="linear"
              repeat="indefinite">
            </a-animation>
          </a-obj-model>

        </a-marker>

        <a-entity camera></a-entity>

    </a-scene>
  </body>
</html>

動画はスマートフォンで実際にやってみた画像です。

下記URLへアクセス後、マーカーにカメラをかざすと表示されます。

https://jtcloudsystem.com/w/2019/

予想以上に簡単に出来ました。

一式サンプルとしてまとめましたので、良かったらダウンロードしてみてください。

ダウンロード

応援よろしくお願いします。
いいね ! してもらえると嬉しいです。

Twitter で

自己紹介

松田 大 と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか...

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています(^_^)。

現在勤めているJTクラウドシステムでは、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表取締役兼二児のパパ。社畜ながらイクメン目指して、公私ともに慌ただしくしています(笑)

お問い合わせはJTクラウドシステムホームページからお願いします。