JavaScript three.js

[javascript]Three.jsでグリッド/カメラ設定(基本)

概要

やれること :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/

 

-JavaScript, three.js

© 2022 monz code Powered by AFFINGER5