３D画像モデルの回転表示とは？
マウス操作で回転表示するOrbitControlsを解きほぐす
はじめに
３次元（以下３D）画像ファイルは広く普及してきています。３Ｄ画像ファイルの画像とは？で、３D画像ファイルについての記事を書いておりますが、３D画像ファイルの画像は、TVモニターなどの2次元画像表示媒体を通して観察されるのが一般的です。
そういう2次元画像表示媒体に表示される３D画像は、当然ながら視点から見える画像は2次元であるので、視点を移動させないと横や後ろの画像を観察することができません。
その視点移動（以下視点制御と呼ぶ）を、マウスやタッチ操作によって３D画像に触れることで操作できれば便利です。
本ブログ記事の写真を３次元立体の立方体に貼り付けるツールや、写真を３次元立体の球体に貼り付けるツールでもそのような視点制御技術を用いています。
3D図面を設計するためのプロ用CADシステムではそういう視点制御は標準的に用いられています。
前回の３D画像ファイルのアニメーションとは？で用いたJavaScriptライブラリであるthree.jsでは、OrbitControlsという仕組みがあります。
OrbitControlsは、
・オービット（周回軌道）: 左ボタンでドラッグ
・ズーム: マウスホイール
・パン: 右ボタンでドラッグ」
引用：Three.jsにはカメラの動きを自動的に制御する OrbitControls
と説明されています。
今回は、３D画像の視点制御で回転表示を行うOrbitControls（軌道制御）を解きほぐすことによって３D画像の表示技術を学ぶことにします。
OrbitControlsの仕組み
Three.jsのOrbitControlsは、OrbitControls.jsというJavaScriptファイルで制御されていています。
OrbitControls.jsの解読はしておりませんが、上記本ブログ記事のツールでは、
という方法で回転制御をしています。
下記で触れるOrbitControls.jsのソースの一部にPolarAngleなどの記述があるのでOrbitControls.jsも似た手法であろうと思われます。
OrbitControlsの制限問題
OrbitControls.jsは大変優れたライブラリなのですが、
引用：three.jsを使ってみた
という問題が指摘されています。
３D画像ファイルで「決定版」とされているglTFファイル（３Ｄ画像ファイルの画像とは？参照）のビューアソフトであるglTF ViewerでもThree.jsとOrbitControls.jsを使っているようなので、その同じ問題が存在しています。
また、
引用：Webからのお手軽ARの手段(model-viewer)、glTF/usdによる表現力の違いについて
と紹介されているmodel-viewerでもその同じ問題が存在しています。
具体例１（OrbitControlsの例）
three.jsとOrbitControls.jsを利用したJavascriptを用いてシンプルな立方体を作りました。
この実行結果を【図１】に示します。
マウスまたはタッチで回転してみて上記問題を確認してください。
上または下に達したら、それ以上回転せずに面内回転に変わります。
制限問題の原因：
OrbitControls.jsのソースを調べてみると、constructorに、
this.maxTargetRadius = Infinity;
this.maxPolarAngle = Math.PI; // radians
の記載がありました。
推測になりますが、横方向は最大が無限なのでどこまでも回転でき、縦方向は最大が１８０゜なので極に当たる上か下まで回転できることを示していると思われます。
おわりに
「[拘束オービット]では、誤ってモデルが完全に裏返しにならないように回転角を制限します。水平方向の回転は自由にできますが、上下に回転した場合、真上または真下(北極または南極)に到達すると回転を停止します。拘束なしでビューを回転する場合は、[自由オービット]モードを使用します。」
引用：AutoCAD 2007 概説書
という記載があり、その回転制限の意図は「誤ってモデルが完全に裏返しにならないように」という考えなのだと理解しました。
