[Swift] ARKit2でコードを書かずに太陽系を作ってみた

# はじめに！

アプリ開発を学習しているtamakouです。
他の言語と違い、Swiftは参考資料の少なさに困ることもあります。(自分だけでしょうか)
今回はARKit2を使い、コードを書かずに太陽系を作りたいと思います。
Xcodeの機能を使えばARてこんなに簡単にできるんやーと思いました。
↓こういったものを作ります。

[コード無し太陽系サンプル動画](https://youtu.be/v9kNtURQVPw)

少し丁寧に書いていきます。長くなるかもやけど始めましょう。
(・・・・正確に言うとファイル名変更の部分で1行だけいじります)


#[1] プロジェクトの作成
#####まずはプロジェクトを立ち上げましょう。
**Create a new Xcode Project -> Augmented Reality App -> ファイル名 create.**
とりあえず今回のファイル名は**[solarSystem]**にしました。
![スクリーンショット 2019-01-19 21.34.31.png](https://qiita-image-store.s3.amazonaws.com/0/346045/62cb09fe-c48f-d824-55cb-2271352355bf.png)

#[2] 3Dモデル作成の準備
Xcode左端のナビゲーター内にある、**[art.scnassets]**を開きます。
そしたら**[ship.scn]**というファイルがあるかと思います。
![スクリーンショット 2019-01-19 21.50.59.png](https://qiita-image-store.s3.amazonaws.com/0/346045/f908ef47-3f9c-880b-a944-9a8fb893f838.png)
この戦闘機はテンプレートモデルであり、今ビルドしてやるとARとしてこいつが表示されます。
とりあえずは今回のファイル名に名前を変えてやりましょう。
**[ship.scn] -> [solarSystem.scn]**

Scene graph内の**[ship]**も**[solarSystem]**に変えました。
ViewController.swift内の、art.scnassets/ship.scnをsolarSystemに書き換えます。
        
        // Create a new scene
        let scene = SCNScene(named: "art.scnassets/solarSystem.scn")!
        
        // Set the scene to the view
        sceneView.scene = scene
    }

scnの画面に戻ります。画面を空の状態にしたいので戦闘機は消してしまいましょう。
クリックしてdeleteキーを押せば消えます。
![スクリーンショット 2019-01-19 22.06.40.png](https://qiita-image-store.s3.amazonaws.com/0/346045/3ca26f70-f287-a92c-2737-dabfc050ec74.png)

次は太陽や惑星達の画像の用意をします。
この辺りは適当に拾ってくるか、うまいこと自分で画像加工してください。
↓こんな感じの展開図が良いです。
![earth.jpg](https://qiita-image-store.s3.amazonaws.com/0/346045/55a3e04d-7807-cfae-3025-2ac45117fe8c.jpeg)
それらの画像を**[art.scnassets]**の中に入れておきます。
次は実装していきます。

#[3] 太陽、惑星を作る
まずはライブラリから**sphere**を選択します。そして適当に置いてやりましょう。
![スクリーンショット 2019-01-19 22.49.43.png](https://qiita-image-store.s3.amazonaws.com/0/346045/2d692369-938d-77b8-ab33-e4bab9ce65a9.png)

今置いたのは太陽となります。サイズと位置を整えたいのでXcode右端のユーティリティーよりRadiusと箱型のタブ？の中にて**position**の設定をしてやります。
**Radiusは[0.2],positionは[0,0,0]**にします。
ちなみに**Radius**を1に設定すると結構大きいです。

次にユーティリティーのマルの形をしたタブ?(マテリアル)をクリック。
**Properties**の**[Shading]**を**[Blinn]**
**[Diffuse]**をクリックし、一覧から画像ファイルを選択。一覧には**[art.scnassets]**内に入れた画像ファイルが出て来るはず。
今回は太陽なので太陽のテクスチャ用画像を選択。

###太陽ができました。
![スクリーンショット 2019-01-19 23.56.14.png](https://qiita-image-store.s3.amazonaws.com/0/346045/d5765c32-32e3-f54a-468d-ba2656e2f4f8.png)

やってる事はとても簡単かと思います。
同じ感じで水星〜海王星を作っていきましょう。
位置は後でまとめて調整すれば良いので星の後方に一個ずつ適当に配置で良いかと。
**solarSystem.scn]**の下に**sphere**がたくさん誕生するので、ついでに名前も惑星毎の名前に変更していきます。

こんな感じです。
![スクリーンショット 2019-01-20 11.58.20.png](https://qiita-image-store.s3.amazonaws.com/0/346045/4cbd7f7a-6a76-bb03-d83a-d8cbf7d06c0a.png)

#[4] 土星のリングの作成
このままでは土星が寂しいので、リングを作ります。
ライブラリの**[Tube]**を画面に置いてやります。

そしたらXcode左側での操作に移ります。
![スクリーンショット 2019-01-20 12.19.08.png](https://qiita-image-store.s3.amazonaws.com/0/346045/4ffafa6d-1f00-942c-e914-f469bde018b1.png)
**[Tube]**を**[saturn]**の中に入れてやりましょう。
**[Tube]**を選んで**[saturn]**に運ぶだけで簡単に親子関係が作れます。
この時、**[Tube]**の**position**を0,0,0にします。

次に**Dimensions**で**[Tube]**の形を整えます。
今回は,
**inner radius = 0.1**
**Outer radius = 0.2**
**Height       = 0.01**
としました。
土星ぽくなりましたがまだ物足りない。
**[Tube]**を選択した状態で、optionを押しながらy軸(上方向)に引っ張りあげます。
そうしたら**[Tube]**がもう1つ出来上がります。
![スクリーンショット 2019-01-20 12.34.30.png](https://qiita-image-store.s3.amazonaws.com/0/346045/72af41e5-05b6-f551-6008-215339b74651.png)
新しくできた方の**Scale**を変更します。
**[1.5, 1, 1.5]**とします。
そしたらこいつも**[saturn]**に入れてやりましょう。
こいつも**position**を0,0,0にします
**[Tube]**が2つ**[saturn]**の下に存在すると思うので、名前を変えてやります。
今回は**[Out ringとinner ring]**とします。

このままではリングのサイズがおかしいので、**inner radiusとOuter radius**をうまく調整してください。
そしてマテリアルを選択しringの色を白っぽい色に変えます。
土星は傾きがあるので(他もあるけどリングがないし目立たないので)傾きも調整します。
**position**の下にある**Euler**のx軸の数値を変えます。今回は[14,0,0]としました。

![スクリーンショット 2019-01-20 12.55.06.png](https://qiita-image-store.s3.amazonaws.com/0/346045/ad1c751a-b95b-4a48-a8a2-427c5e2260c2.png)

よく見る土星の完成です！

次は太陽の周りを回るアニメーションに入っていきます。

#[5] アニメーション
このままでは一列に並んだ太陽系です。自転と公転を入れましょう。

まずは自転から設定します。
画面の下からactionsを設定できる欄を引っ張り上げます。
ある人はそのままで。
![スクリーンショット 2019-01-20 13.09.28.png](https://qiita-image-store.s3.amazonaws.com/0/346045/6184080b-9ac7-54db-3959-3ca19a0ad6e3.png)
ライブラリで**[rotate action]**を選択し下の欄に運びます。
![スクリーンショット 2019-01-20 13.12.07.png](https://qiita-image-store.s3.amazonaws.com/0/346045/1d0c3133-f199-9d99-cd19-d2ec451d7d6e.png)
追加された部分にカーソルを合わせると回転矢印マークが左に出てきますのでそれをクリック。
♾マークがあるのでそれをクリック。
無限に回ります。コードでいうrepeat foreverですね。

これだけでは回らないので、回転数を調整します。
Xcode右側にて**Euler angles**の数値を設定します。
今回は**[0, 10, 0]**とします。これで太陽は回転するかと思います。

同じ要領で他の惑星にも自転を与えましょう。

ここまでできれば、Xcode左側にて太陽(sun)を**[solarSystem]**に入れます。
他の惑星たちも入れてやります。

続いてライブラリから**[Empty Node]**を選択し、Xcode左の**[Mercury]**の上に置いてやります。
名前を**[Mercury Node]**とします。
**[Mercury Node]**を選択し、ライブラリから**[rotate action]**を選択。

惑星と同じ要領で設定します。**Euler angles**は**[0, 30, 0]**とします。

**[Mercury Node]**に**[Mercury]**を入れます。

再生ボタンを押し試してみてください。
太陽の周りを水星が回るはずです。

他の惑星も同じく、**[Empty Node]** -> **[惑星名 Node]**に名前変更 -> 惑星を**[惑星名 Node]**に追加 -> **[惑星名 Node]**に対し、**[rotate action]**を追加 -> **Euler angles**のy軸の値を変更

あとは**[solarSystem]**の**position**を**[0, 0, 1.5]**にしましょう。
ここまでできればもう太陽系の完成です。

位置や速度の値は個人差はあるかと思いますが、こんな感じになるでしょうか。

[上から見た太陽系サンプル動画2](https://youtu.be/yY-tyi2aEN0)

月などの衛星の追加も同じ要領で試してみてください。
文としては長くなりましたが、作業自体はとても簡単なものです。

#終わりに
とても長くなりましたが、誰でも出来る風にかけたのではないでしょうか。
後半少し雑になってきてますが。笑
初学者でも簡単にこういったことが出来るのは良い時代になったなーとつくづく思います。
コードを書くのも良いけど、息抜きにこういったARで遊んで見るのも良いかもしれませんね。
ただ3Dデータを作れるだけではなく、コードと組み合わせて色々できます。
自分は太陽にパーティクルを適用し燃える表現をしました。

```ViewController.swift

        // 球体を作成
        let sun = SCNSphere(radius: 0.2)
        // 表面を指定
        sun.firstMaterial?.diffuse.contents = UIImage(named: "sun")
        let sunNode = SCNNode(geometry: sun)
        // 表示位置を指定
        sunNode.position = SCNVector3(0, 0, -1.5)
        
        // パーティクルシステム
        let particle = SCNParticleSystem(named: "sunFire.scnp", inDirectory: "")
        particle?.emitterShape = sun
        let particleShapePosition = particle?.emitterShape?.boundingSphere.center
        
        let particleNode = SCNNode()
        particleNode.pivot = SCNMatrix4MakeTranslation(particleShapePosition!.z, particleShapePosition!.x, 0.9)
        particleNode.addParticleSystem(particle!)
        
        scene.rootNode.addChildNode(particleNode)
```
雑なコードだったらすみません。笑
これからのAR技術の発展が楽しみです。
tamakou