この記事は公開から 1 年以上経過しています。

Kudan AR SDK で AR iOS アプリを作ってみよう〜マーカー上に 3D モデルを表示

こんにちは。エクセルソフトの田淵です。

弊社取り扱いの Kudan AR SDK のエントリーです。

SDK のダウンロードは こちら からお申込みください。SDK を使った開発と、個人開発者のリリースは無料でご利用いただけます。企業の方は有料になりますので、@ytabuchi までご連絡ください。

前回の iOS のエントリー ではマーカー上で画像を表示しました。

今回は 3D モデルを表示します。基本的には Android と同じ流れで、画面を作り、コードを追記していきます。

現時点でのサンプルコードは ytabuchi の Github にアップしてあります。この後もコミット追加していくのでスナップショットです。

Asset の準備

最初に 3D モデルのモデルファイルとテクスチャーファイルをプロジェクトに読み込みます。

プロジェクトのルートを右クリックして、「New Group」をクリックし、「Assets」フォルダを作成します。

ダウンロードした assets.zip を展開し、ben.jetben.armodel に拡張子を変更します。
ben.jet のままでも動作します。逆に、Android では .jet の拡張子の必要があるようです。)

拡張子が見えていない場合は macOS Sierra: ファイル名拡張子を表示する/隠す を参考に見えるようにしておくと何かと便利です。

ben.armodelbigBenTexture.png を作成した Assets フォルダにドラッグ&ドロップします。

コピーするかを聞かれますので、「add to targets」にチェックが入っていることを確認し、プロジェクトにコピーします。

Type が、ben.armodel は「Default – Data」、bigBenTexture.png は「Default – PNG Image」になっていて、「Target Membership」にチェックが入っていることを確認してください。

これでコードから参照できる状態になりました。

UI の設定

Storyboard にボタンを配置します。

詳細は割愛しますが、Constraints などを設定し、Option キーを押しながら ViewController.swift を開き、OutletAction を設定しておきましょう。

コード(ViewController.swift)の編集

setupContent の内容を分解

最初に複数のメソッドからアクセスされるクラス変数 var imageTrackable:ARImageTrackable?Action の下、setupContent の上に定義します。

setupImageTrackable を用意して ImageTrackable にマーカーを追加するコードを移動します。

次に addImageNode を用意して、画像のオブジェクトを追加するコードを移動します。

その下に clearButton の TouchUpInside のアクションで呼ばれる、全てのノードを非表示にする clearAllNodes メソッドを用意して、以下のコードを追加します。

メソッドが用意できたので、ボタンのアクションに追加しましょう。以下のコードを Action に追加します。

この時点で動かしてみましょう。

https://platform.twitter.com/widgets.js

こんな感じです。良い感じですね!

3D モデルの処理を追加

ViewController.swift に戻り、clearAllNodes メソッドの前に、addModelNode メソッドを追加します。

ARModelNode クラスのメッシュオブジェクトが格納されている meshNodes は [Any]? 型なのでアンラップして ARMeshNode のオブジェクトの material に割り当てています。

Android ではモデルファイルとテクスチャーファイルを指定していましたが、このコードでは、ARLightMaterial を使用していルため、モデルファイルに含まれる(?)テクスチャーのファイル名を自動的に参照してくれるようです。そのため、コード内では bigBenTexture.png を参照していません。

現時点で私が Material についてあまり知識を持っていないのでまだよく分かっていませんが、理解できたらこのエントリーも更新したいと思います。

最後にボタンの TouchUpInside イベントにコードを追加しましょう。

最終的に ViewController.swift は以下のようになっているはずです。

「3D Model」ボタンをクリックして、以下のようにマーカー上に時計台が表示されれば成功です。

この後は

次は動画を表示してみましょう。

Kudan AR SDK エントリー一覧

Kudan AR SDK チュートリアル記事まとめ | エクセルソフト ブログ

をご覧ください。

以上です。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする