ARKitのノードの回転方法

# はじめに
ARアプリを作成していて、x、y、z軸におけるオブジェクトのポジションについては理解しやすいですが、
回転や傾きになるとよくわかんなかったので調べてみました。

回転させる方法はいくつかあるようですが、今回はeulerAnglesプロパティを使用しています。
[eulerAngles](https://developer.apple.com/documentation/scenekit/scnnode/1407980-eulerangles)
このプロパティはピッチ(x軸)、ヨー(y軸)、ロール(z軸)を基準にして、ノードのラジアン(角度)を設定するものです。
ラジアンについては[このサイト](https://juken-mikata.net/how-to/mathematics/radian.html)のおかげで理解できました。
普段使っている180°や90°は度数法という角度の測り方ですが、Xcodeでは度数法ではなくラジアンを使用しています。
ですのでeulerAnglesプロパティに対して直接90と設定しても思った結果が得られません。

# 開発環境
回転の状態が分かりやすいように今回はSCNPlaneの表面に対してイメージ画像を貼り付けて、どのように回転しているか確認しています。
以下をデフォルト状態としてx軸、y軸、z軸に対して回転させています。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">SCNPlaneをデフォルトで表示した場合<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://twitter.com/hashtag/ARKit?src=hash&amp;ref_src=twsrc%5Etfw">#ARKit</a> <a href="https://twitter.com/hashtag/ios?src=hash&amp;ref_src=twsrc%5Etfw">#ios</a> <a href="https://twitter.com/hashtag/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/kfbtO3EAhF">pic.twitter.com/kfbtO3EAhF</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1084639071568257024?ref_src=twsrc%5Etfw">2019年1月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ピッチ(x軸)に対して-90°回転させる
```swift
planeNode.eulerAngles.x = -.pi / 2
```
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">SCNPlaneをオイラー角x軸に対して-90°回転させた場合<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://twitter.com/hashtag/ARKit?src=hash&amp;ref_src=twsrc%5Etfw">#ARKit</a> <a href="https://twitter.com/hashtag/ios?src=hash&amp;ref_src=twsrc%5Etfw">#ios</a> <a href="https://twitter.com/hashtag/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/r02xapY27g">pic.twitter.com/r02xapY27g</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1084639662595919872?ref_src=twsrc%5Etfw">2019年1月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ピッチ(x軸)に対して90°回転させる
```swift
planeNode.eulerAngles.x = .pi / 2
```
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">SCNPlaneをオイラー角x軸に対して90°回転させた場合<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://twitter.com/hashtag/ARKit?src=hash&amp;ref_src=twsrc%5Etfw">#ARKit</a> <a href="https://twitter.com/hashtag/ios?src=hash&amp;ref_src=twsrc%5Etfw">#ios</a> <a href="https://twitter.com/hashtag/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/phuEkONIyI">pic.twitter.com/phuEkONIyI</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1084640159511961600?ref_src=twsrc%5Etfw">2019年1月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ヨー(y軸)に対して-90°回転させる
```swift
planeNode.eulerAngles.y = -.pi / 2
```
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">SCNPlaneをオイラー角y軸に対して-90°回転させた場合<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://twitter.com/hashtag/ARKit?src=hash&amp;ref_src=twsrc%5Etfw">#ARKit</a> <a href="https://twitter.com/hashtag/ios?src=hash&amp;ref_src=twsrc%5Etfw">#ios</a> <a href="https://twitter.com/hashtag/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/SaxCb7XZSR">pic.twitter.com/SaxCb7XZSR</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1084641555468570624?ref_src=twsrc%5Etfw">2019年1月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ヨー(y軸)に対して90°回転させる
```swift
planeNode.eulerAngles.y = .pi / 2
```
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">SCNPlaneをオイラー角y軸に対して90°回転させた場合<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://twitter.com/hashtag/ARKit?src=hash&amp;ref_src=twsrc%5Etfw">#ARKit</a> <a href="https://twitter.com/hashtag/ios?src=hash&amp;ref_src=twsrc%5Etfw">#ios</a> <a href="https://twitter.com/hashtag/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/tAPxsi1F6I">pic.twitter.com/tAPxsi1F6I</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1084641858519654400?ref_src=twsrc%5Etfw">2019年1月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ロール(z軸)に対して-90°回転させる
```swift
planeNode.eulerAngles.z = -.pi / 2
```
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">SCNPlaneをオイラー角z軸に対して-90°回転させた場合<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://twitter.com/hashtag/ARKit?src=hash&amp;ref_src=twsrc%5Etfw">#ARKit</a> <a href="https://twitter.com/hashtag/ios?src=hash&amp;ref_src=twsrc%5Etfw">#ios</a> <a href="https://twitter.com/hashtag/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/idBDGLhkqz">pic.twitter.com/idBDGLhkqz</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1084642645203288064?ref_src=twsrc%5Etfw">2019年1月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# ロール(z軸)に対して90°回転させる
```swift
planeNode.eulerAngles.z = .pi / 2
```
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">SCNPlaneをオイラー角z軸に対して90°回転させた場合<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://twitter.com/hashtag/ARKit?src=hash&amp;ref_src=twsrc%5Etfw">#ARKit</a> <a href="https://twitter.com/hashtag/ios?src=hash&amp;ref_src=twsrc%5Etfw">#ios</a> <a href="https://twitter.com/hashtag/Xcode?src=hash&amp;ref_src=twsrc%5Etfw">#Xcode</a> <a href="https://t.co/K2QOo28EO0">pic.twitter.com/K2QOo28EO0</a></p>&mdash; TatsunoriMorita (@king_of_morita) <a href="https://twitter.com/king_of_morita/status/1084642883368435712?ref_src=twsrc%5Etfw">2019年1月14日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# まとめ
.Pi / 2でラジアン角度の90°を計算しています。これは方程式があるので求めたい角度を代入すれば簡単に計算することができます。
ツイッターの動画投稿方法を失敗して分かりにくくて申し訳ないです。