Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Article information
RevisionsShow article in Markdown
Report article
Help us understand the problem. What is going on with this article?

This post is Private. Only a writer or those who know its URL can access this post.

@ebiflyyyyyyyy

AR名刺を作ろう

AR名刺を作ろう

by ebiflyyyyyyyy
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

Article information
RevisionsShow article in Markdown
Report article
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ebiflyyyyyyyy
面白そうな技術に飛びつくビギナーです

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
Article information
RevisionsShow article in Markdown
Report article
Help us understand the problem. What is going on with this article?