【Three.js】 PerspectiveCameraPerspectiveCamera・OrthographicCamera

はじめに

みなさんは、Three.jsでどのカメラを使うか悩むことはないです？
この記事では、Three.jsで使うことができるPerspectiveCameraPerspectiveCameraとOrthographicCameraのまとめました。

PerspectiveCameraPerspectiveCamera

遠近法を持つ現実のカメラをシミュレートしたものです

↓このように使います。
PerspectiveCamera(field of view, aspect ratio, near, far)

• field of view：画角（45~75くらい）
• aspect ratio：アスペクト比
• near・far：レンダリングの距離
  • nearの値より近いオブジェクトはレンダリングされない
  • farの値より遠いオブジェクトはレンダリングされない

sample.js

const camera = new THREE.PerspectiveCamera(75, 1920/1080, 1, 100 )

sample

See the Pen Three.js test by でぐぅー | Qiita (@sp_degu) on CodePen.

OrthographicCamera

遠近感のないシーンのオルソグラフィックレンダリングを作成するために使用します。Age of EmpireのようなRTSゲームを作るときに便利です。カメラからの距離に関係なく、画面上の要素は同じサイズになります。

↓このように使います。
OrthographicCamera(left, right, top, bottom, near, far)

• left・right・top・bottom：それぞれの方向でカメラが写す画角
• near・far：レンダリングの距離
  • nearの値より近いオブジェクトはレンダリングされない
  • farの値より遠いオブジェクトはレンダリングされない

sample.js

const camera = new THREE.OrthographicCamera(- 1, 1, 1, - 1, 0.1, 100)

sample

See the Pen Three.js - camera (PerspectiveCamera) by でぐぅー | Qiita (@sp_degu) on CodePen.

まとめ

この記事では、Three.jsで使うことができるPerspectiveCameraPerspectiveCameraとOrthographicCameraのまとめました。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。