【無料】誰でも簡単！Fusion 360 × GitHub × Safariで自作3Dモデルを拡張現実(AR)表示する方法【iPhone対応】

3Dプリントしてみて、思った感じと違うと思ったことありませんか？
3Dモデルを3Dプリントする前にAR表示することができれば、このモヤモヤを解消できると思い調べてみました！

「作った3DモデルをiPhone上でAR表示したい！」
「アプリ不要で自分のモデルを現実世界に表示したい！」

そんな方におすすめな方法です。
再現性重視の手順で紹介しますので、最後までご覧ください🙏

🔍 この記事で得られるもの

• CADで作成した3Dモデルを iPhoneで拡張現実(AR) 表示する手順
• Fusion360で任意のファイル形式で書き出すやりかた
• Github Pageにデータを公開するやりかた

📋 必要なもの（準備物）

• Fusion 360（またはUSDZ形式で出力できるCAD）
• GitHubアカウント（無料）
• iPhone（iOS12以上）とSafari / Google Chrome

Fusion 360でモデル作成＆USDZ形式でエクスポート

お好きなモデルを作成

Fusion360で3D形状を作成

※ここでの座標系がそのままAR表示されます

商品は、こちらから購入できます

USD形式で書き出し

ファイル→エクスポートより、USDファイルを指定して出力

GitHubにてAR表示するための公開リンクを作成

GitHubでアカウント作成&ログイン

https://github.comのSign upから無料アカウント作成
※「メールアドレス」「パスワード」の設定が必要

Githubにログインする

ARファイルを入れる箱となるリポジトリを作成

New repositoryからリポジトリを作成する

1. リポジトリ名[ar-demo（例）]を記入
2. Publicリポジトリに設定
3. 「Create repository」

USDファイルをアップロード

1. 作成したページに「uploading an existing file」をクリック
2. .usdファイルをドラッグ＆ドロップ→「Commit changes」

GitHub Pagesを有効化

1. リポジトリの Settings → Pages を開く
2. Sourceを Deploy from a branch、Branch：main、Folder：/ (root) に設定→Save
3. 数分後に画面上部に “Your site is live at https://ユーザー.github.io/ar-demo/” とリンクが表示

Github Pageのリンクを取得

📌 このURLに続き ファイル名.usdz を付けたURLがファイルへの直リンクになります。

SafariでARファイルを開いて表示

以下のURL例をiPhoneのSafariで開いてみましょう👇

https://kimagure3d-bell.github.io/ar-demo/test.usdz

SafaiでURLを開いた直後

右上の立方体マークをクリック

ARモードとオブジェクトモードが選択できます

ARモードでiPhoneをグルグルとしばらく動かすと、3DモデルがAR表示されます！

実物との比較したところ、大きさも良い感じに表示されました🥳

💡Tips

私がこの手順に辿り着くまでに苦労した点をTipsとしてまとめました

• Githubのリンクを開いたところ、404エラーのはなぜか？
  →URLの末尾にファイル名「test.usdz」がついていない
  →公開までに時間がかかることがあるので5分後に試してみる
• ブラウザはSafari以外もできるのか？
  →Google Chromeもできました！

Bell

CAEエンジニア

XInstagramContact

物理系修士卒。BtoBメーカーの機構設計開発業務を経験。
3D-CAD・CAEに出会い、コンピュータ上でのアイデアを具現化できる面白さに惹かれて、社内のCAD・CAE推進部署に異動して現職。

猫に囲まれて暮らすのが夢🐈🐈🐈