README

開発フロー

1. このプロジェクトをダウンロード

• ダウンロードはこちら
• あるいはこのリポジトリをテンプレートとしてマイリポジトリを作ってください

2. 3Dモデルを調達&設置

• Free 3Dで好みのマテリアル付き3Dをobj形式でダウンロード（マテリアルはこいういうの）
• 解答したディレクトリをプロジェクトディレクトリに設置（現状catがある）
• index.htmlの以下の部分を設置したディレクトリのパスに変更

/cat/12221_Cat_v1_l3.objと/cat/12221_Cat_v1_l3.mtlの2箇所を修正

<a-entity 
obj-model="obj: url(/cat/12221_Cat_v1_l3.obj); 
mtl: url(/cat/12221_Cat_v1_l3.mtl)" scale="0.05 0.05 0.05" rotation="-90 0 0">
</a-entity>

注意

• ダウンロードした3Dディレクトリ内のファイル名は変更しないこと。
• 大きさや角度は scale や rotation の数字をいじって調整

3. Netlifyにデプロイ

Netlify（無料）

• GitHubと連携をオススメ
• プロジェクトディレクトリを丸ごとドロップしてもいい
• URLは設定画面から変えられます。
• Netlifyじゃなくてもいいです。

注意

• 3Dモデルによっては初回カメラかざしてからしばらくしないと登場しません。（10秒程度）

4. QRコード作る

• QR-monkeyで作成マーカーつきQRを作成（3の公開URL使う）
• 画像はこれ使う
• QRの色や見た目は色々おしゃれにできます。

5. 名刺に貼る

• ラクスルのオンラインジェネレーターがオススメです。
• 安い紙で急ぎでなければ500円で100枚ほど手に入ります。（紙質結構良い。デフォのマットがオススメ）

使い方

1. 名刺のQRをスマホ標準のカメラでかざす
2. Netlifyのサイトに飛んでカメラ起動する
3. 再度QRコードをかざす
4. オブジェクトが表示される

おまけ

連絡先情報の追加

position: fixed でHTMLを重ねて情報をおいてみましょう。

• SNSリンク
• 連絡先、会社名、実績、主な活動

3Dモデルの自作、カスタマイズ

blendarという無料ソフトを使えば自分で3Dモデルも作れます。

3D表現のリッチ化

• a-frameが使われているのでモデル動かしたり、雪降らせたり色々できます。
• テキストをおいたりもできます。（詳細は検索）

宣伝

開発ツイートなどしてますのでよろしければフォローお願いします。

@d151005