学ぶ3D表現Three.jsのカメラ目次Three.jsにはCamera3Dクラスがあることを、入門編で紹介しました。このCamera3Dがどのようにして利用できるのか、もう少し掘り下げて学んでみましょう。Three.jsにさまざまな種類のカメラが搭載されています。平行投影が適用されるカメラ本節ではPerspectiveCameraとOrthographicCameraの2種類を掘り下げて解説します。PerspectiveCameraサンプルを再生するサンプルのソースコードを確認する遠近感を表現できるカメラです。PerspectiveCameraインスタンスのfovプロパティーを設定することで、カメラの視野角を変更できます。視野角とはカメラが映し出せる範囲のことです。2000);fovプロパティーは次の書式で変更できます。View=視野角の頭文字の略語です。▲fovが30度だと、レンズが望遠となります。遠近感をそれほど強調したくない場合は視野角を小さくするとよいでしょう。▲fovが90度だと、レンズが広角となりカメラに近い3Dオブジェクトも視野角に入ります。遠近感を強調したい場合は視野角を大きくするとよいでしょう。OrthographicCameraサンプルを再生するサンプルのソースコードを確認するOrthographicCameraは平行投影を表現できるカメラです。このカメラには遠近感がないので、手前にある3Dオブジェクトも奥にある3Dオブジェクトも同じ大きさで表示されます。1000);サンプルのように規則正しく3Dオブジェクトを配置すると、平行投影のゲームのような表現が得られます。共通の設定:クリッピング3D空間に存在するすべてのポリゴンをレンダリングするとパフォーマンスをムダに使ってしまうので、クリッピングという機能がレンズには備わっています。カメラから見て一定距離区間の間に存在するオブジェクトだけをレンダリングし、その距離の区間の外のオブジェクトはレンダリングしないというしくみです。クリッピングは次の2つのプロパティーで制御されます。区間の終了距離Three.jsではnearのデフォルト値は1、farのデフォルト値は2000に設定されています。farの値はかなり小さく設定されていますので、必要に応じて大きな値に変更するとよいでしょう。令和元年6月11日現在最新のリビジョン105を元に執筆しています。作例をみてThree.jsで実現可能な表現のインスピレーションを得ましょう。(英語)Three.jsの情報源わからないことがあれば、フォーラムや勉強会を調べてみましょう。