LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

AR名刺を作ろう

Last updated at Posted at 2021-03-17
1 / 28

2021/03/27
於:エンジニアカフェ (AkarengaLT #8)
ハッシュタグ: AkarengaLT


完成図


想定しているレベル感の方

  • html、聞いたことある
  • AR、なにから始めようか迷ってる
  • 静的コンテンツのホスティングに興味がある

事前準備

  • Githubのアカウントを作る
  • 任意のエディタを用意する(プレビュー機能があるVScodeなど便利)
  • Netlifyのアカウントを作っておく
  • ラクスルに登録(名刺の発行まで行う方のみ)
  • 表示したい3Dモデルを用意する

他のパターン

任意のレンタルサーバーなどにSCPしたり、
手元で試したい場合はhttp-serverを導入したり、MAMP、XAMPPなどを利用してhtmlを公開できる状態にする


作成の流れ(1)

  • HTMLソースを書く
  • GitHubにpush (htmlとモデルファイルとARマーカーだけなのでブラウザ経由でも可)
  • Netlifyとリポジトリを連携する (これはGithub pagesでも可)

作成の流れ(2)

  • AFrame稼働用のURLをQRコードに格納
  • 表示したいモデルを作る
  • 表示したいものを呼び出しパターンに格納
  • ARマーカーを作成(AR.ja marker generater )
  • 実機でテスト
  • ネットプリントサービスのテンプレートにARマーカーおよびQRを配置
  • 名刺を注文(今回の例ではラクスルさんへの注文を最終目的地とする)

仕様編

arcord_all.png


ディレクトリの構造

my-repo
├── index.html
├── mystyle.glb
└── pattern-generate.patt

利用するフレームワーク

  • AFrame
  • AR.js

応答の仕組み

arcord_reqandres.png

  • スマートフォンのカメラでQRコードを読み込んでページにアクセス
  • デバイスのカメラをブラウザから使う許可を求める
  • ARマーカーのパターンを提示
  • AFrameが格納されたパターンを構築

ソース


ソース

index.html

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,intial-scale=1">
        <title>ARcardAlt9800</title>
    </head>
    <body style="margin:0px; overflow:hidden;">
        <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
        <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

        <a-scene embedded arjs="debugUIEnabled:false;" "sourceType: webcam;" renderer="gammaOutPut: true;" vr-mode-ui="enabled: false">
            <a-assets>
                <a-asset-item id="mystyle" src="mystyle.glb"></a-asset-item>
            </a-assets>  
            <a-marker 
            markerhandler
            emitevents="true"
            cursor="fuse: false; rayOrigin: mouse"
            preset="custom" 
            type='pattern' 
            url="./pattern-generate.patt">
            <a-entity
            gltf-model="#mystyle"
            scale="2 2 2"
            rotation="0 0 0"></a-entity>

            </a-marker>

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


モデルの作成編


モデルの作成

各社からいろんなアプリが出ている([iOS 点群メッシュ]などで検索)


モデルファイル色々

  • glb
  • gitf
  • stl
  • obj / mtl

田中の場合はobjとmtlからglbを作成してこれを読み込んでいる。


モデルの確認

  • Blenderが便利 mtlとobjの統合なんかもできる
  • VScodeの拡張でもできる

名刺作成


ラクスルにアクセスしマイページへ移動

image.png


デザインツールを使う

image.png


テンプレートを用いて名刺を仕上げる

image.png

  • パワーポイントなどスライドツールを使うノリでパーツの配置ができる
  • 画像素材のドラッグアンドドロップも簡単!

値段など

image.png


応用例

  • 結婚式のカード
  • 年賀状

先駆者

エンジニアの学生コミュニティは京都のCAMPHOR-さんや渋谷のスポンサーをして若手向けのカンファレンスを行うBit Valleyみたいなのもあるそうな。


関連コミュニティ


参考リンク


今回は後から参照しやすいか実験をかねてqiitaのスライド機能を使ってました
このスライドのリンクはこちら
image.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up