javascript - Three.js-ビューの幅

Question

シーンのレンダリングされた部分の幅を見つける方法はありますか？

たとえば、幅100のメッシュがあるが、特定のレベルのズームでレンダリングされている場合...画面にレンダリングされているメッシュの部分の幅を計算するにはどうすればよいですか？

Answer 1

ここでは正確にする必要があります。

カメラの視野 とカメラからのcamera.fov距離 が与えられると、可視の四角形領域を計算できdistます。

オブジェクトにはおそらく奥行きがあるため、メッシュを介して 1 つの平面を選択し、その距離で計算を行う必要があります。

これは、カメラからの特定の距離に対する可視距離heightと距離を計算する方法です。widthdist

var vFOV = THREE.MathUtils.degToRad( camera.fov ); // convert vertical fov to radians

var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

var width = height * camera.aspect;           // visible width

three.js r.117

Answer 2

(完全な) 球形のオブジェクトの場合、接線を考慮する必要があるため、クローズ アップでより多くのビューをカバーします。つまり、「極」が見えません。

球体オブジェクトには次を使用します。

// we're using the following triangle: camera - tangent point on sphere - centre of sphere
var targetAngle = 2 * Math.asin(objectRadius / distanceToCamera);

var vFOV = THREE.Math.degToRad(this.fov);

var normalizedHeight = targetAngle / vFOV;

これにビューポートの幅を掛けて、画面の高さを取得します。幅については、hFOV を適用する必要があります - 参照: THREE.PerspectiveCamera で歪みのない 90 度の視野