目次
概要
やれること ：Tree.jsでのグリッドの追加/カメラの設定変更
読者対象 ：Tree.js入門者
必要時間 ：20分程度
必要条件 ：html＋javascriptの動作環境がある/Tree.jsが使える(これができるレベル)
筆者のスキルレベル
three.jsを初めて触るレベル
html＋javascriptも学習サイトで入門編を終えた程度
やりたいこと
前回は3Dモデルを表示させることに成功したので、今回はカメラ設定とグリット表示を出来るようにしたいと思います。
グリッド表示について
まず、threejsで表示できるグリッドには2種類あります。少しわかりにくですが、下記サンプルの左の正方形のグリッド、右の円形のグリッドです。
引用元：https://threejs.org/examples/#webgl_helpers
正方形のグリッドは、いわゆる中学くらいで学ぶ単純な座標系(直行座標)に沿ったグリッドです。GridHelperという関数で表示が可能です。
GridHelperのReference：https://threejs.org/docs/index.html#api/en/helpers/GridHelper
円のグリッドが、高校くらいで学ぶ極座標系に沿ったグリッドです。中心からの距離と角度で位置を示す座標系ですね。これはPolarGridHelperという関数で表示可能です。
PolarGridHelperのReference：https://threejs.org/docs/index.html#api/en/helpers/PolarGridHelper
ソースコード
具体的な使い方は下の通りです。下記のコードをjsに書き加えます。
実行結果
正方形のグリッド
円のグリッド
カメラ設定(基本)について
three.jsには ArrayCamera /Camera /CubeCamera /OrthographicCamera /PerspectiveCamera /StereoCamera のような様々なカメラが使えます。
私も知っている代表的(?)なOrthographicCamera /PerspectiveCameraを今回は使っていきます。
PerspectiveCamera
PerspectiveCameraは透視投影で表現された絵を撮影できるカメラで、透視投影とは人間が見た感覚に近い遠近法を用いた投影手法です。基本は何も考えない場合は3Dはこの手法で撮影しておけばいいのかと思います。
PerspectiveCameraのReference：https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera
OrthographicCamera
OrthographicCameraは平行投影で表現された絵を撮影します。平行投影とは手前と奥側で同じものは同じ大きさで描く表現です。(対して透視投影は遠くのものが小さく描かれます。)なのでいろんな位置のものの大きさを把握するには適していますが、人間の見た目と異なるため違和感があります。
OrthographicCameraのReference：https://threejs.org/docs/index.html#api/en/cameras/OrthographicCamera
ソースコード
具体的な使い方は下の通りです。下記のコードをjsに書き加えます。
実行結果
上でやったgirdの表示を各カメラで比較してみます。
PerspectiveCamera
各グリッドの正方形は同じ大きさでが奥側ほど小さく描かれます。3Dといえば、このイメージです。
OrthographicCamera
各グリッドが奥側であっても同じ大きさに描かれます。なので奥側という感じがしないですが、遠近感で物の大きさを見誤りるということはなさそうです。
今回参考にしたサイト
three.js公式：https://threejs.org/
ICS MEDIA：https://ics.media/tutorial-three/camera_variation/