LoginSignup
2

More than 5 years have passed since last update.

いらすとやから始めるARKit

Posted at

みなさんARKit触っていますか?

  • 3Dモデルがないと触ってもつまらなさそう
  • そもそも3D難しそう

などの理由で触っていない方も多いと思いますが、
今回は少ないコードでいらすとやの画像1枚から始めるARKitを解説しようと思います。

プロジェクト作成

まずはARKit用のプロジェクトを作成するところから。
Augmented Reality Appを選択してプロジェクトを作成します。
スクリーンショット 2019-01-19 1.20.09.png

プロジェクトを作成したら何も変更せず、実機インストールしてみましょう。
Qiitaの記事などでよくみる例の飛行機がでてきますね。
これでプロジェクトの作成ができたので次はいらすとやの画像をARオブジェクトとして表示しましょう。

ARオブジェクトの作成

私はイチゴが好きなのでこの画像をARオブジェクトとして表示させます。
皆さんはイチゴじゃなくてりんごやバナナ、メロンでもいいです。
カバやゴリラでも問題ありません。

ARオブジェクトにする画像を決めたらAssets.xcassetsの中に入れます。
スクリーンショット 2019-01-19 1.30.51.png

次に平面オブジェクトをコードで作成します。
ARKitの世界では1 = 1メートルなので下記のコードでは、
横20cm x 縦20cmの平面オブジェクトが生成されます。


func addPlane() {
    guard let image = UIImage(named: "strawberry") else { return }
    let node = SCNNode()
    let plane = SCNPlane(width: 0.2, height: 0.2)
    plane.firstMaterial?.diffuse.contents = image
    node.geometry = plane
    node.position = SCNVector3(0, 0, -0.5)
    self.sceneView.scene.rootNode.addChildNode(node)
}
  • オブジェクトのサイズ指定(横20cm x 縦20cm)

    let plane = SCNPlane(width: 0.2, height: 0.2)

  • 画像を平面オブジェクトのテクスチャとして指定
    plane.firstMaterial?.diffuse.contents = image

  • AR空間のどこに配置するか指定(x: 0cm, y: 0cm, z-50cm)
    node.position = SCNVector3(0, 0, -0.5)
    細かい説明は省きますが-0.5でカメラ位置から50cm奥に配置されます。
    ※0.5だと50cm手前に配置される
    詳しく知りたい方は@k-boyさんのARKitのための3D数学が非常にわかりやすいので是非読んでみるのをお勧めします。

  • 作成した平面オブジェクトを描画
    self.sceneView.scene.rootNode.addChildNode(node)

これでオブジェクトの作成は終わりなのでこの関数をViewDidLoad()で呼び出すと画像がARとして表示されます。

おわりに

今回はARKitや3Dに関しての知識がなくても簡単にARKitを使えるというテーマで書いたのでだいぶ内容が簡素な感じになりました。

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
2