PerspectiveCamera と OrthographicCamera の違いを図で理解する
new THREE.PerspectiveCamera(
fov, aspect, near, far
)
new THREE.OrthographicCamera(
left, right, top, bottom, near, far
)
| 項目 | PerspectiveCamera | OrthographicCamera |
|---|---|---|
| 視錐台の形状 | 錐台（四角錘を切った形） | 直方体（箱型） |
| 投影方式 | 透視投影（Perspective） | 平行投影（Orthographic） |
| 遠近感 | あり（遠くは小さく見える） | なし（距離によらず同サイズ） |
| 主なパラメータ | fov, aspect, near, far | left, right, top, bottom, near, far |
| 用途 | 3Dゲーム・VR・リアルなシーン | 2Dゲーム・UI・設計図・等角図 |
| fov の影響 | 視野角が広いほど魚眼レンズ的に | fov パラメータなし（left/right/top/bottomで制御） |
Retinaディスプレイなどでは、CSSピクセルと物理ピクセルが一致しません。
renderer.setPixelRatio() で物理ピクセルに合わせ、
setSize() にはCSSサイズを渡すのが基本です。
PerspectiveCameraでは、オブジェクトのスクリーン上のピクセルサイズはカメラからの距離に依存します。 「ちょうど N px に映したい」場合、次の式で距離を逆算します。
⚠️ リサイズで aspect が変わると投影行列が変わるため updateProjectionMatrix() が必須です。
OrthographicCameraは 「1ワールド単位 = 1CSSピクセル」を直接指定できます。 left/right/top/bottom をキャンバスサイズに合わせると座標が1:1対応します。
✅ 距離に関係なくサイズが変わらないため UIオーバーレイ・2Dスプライト・ピクセルアート に最適。
renderer.setPixelRatio(devicePixelRatio) — Retina対応setSize(clientWidth, clientHeight) — CSSピクセルで渡すcamera.updateProjectionMatrix()camera.aspect を更新left / right / top / bottom を更新
project() / unproject() の扱いやすさnear = 0 にすると深度バッファの精度が壊滅。near と far の比率（far/near）を 1000 以内に抑えるのが鉄則。
camera.aspect を更新せず updateProjectionMatrix() を呼ばないと、映像が縦横に引き伸ばされる。
polygonOffset で対処。
camera.position の変更で実現。FOVアニメーションと混在させるとバグる原因に。
left / right / top / bottom を全部更新しないと縦横比が崩れる。aspect 1つで済む Perspective と違い忘れやすい。
camera.zoom プロパティで制御。enableZoom: true でも動作が Perspective と異なるため要確認。
top に正値・bottom に負値を渡す必要がある。CSS座標系（Y軸下向き）と逆なので混乱しやすい。
near / far の範囲を確認。
position に 0.5 ずれがあるとバイリニアフィルタでボケる。Math.round() で座標を整数化すること。