CODEWITHSUNDEEP
javascriptthree.js
Chris Morgan
Chris Morgan

Reputation: 1339

Calculating the camera near and far plane bounds

I'm trying to perform the calculations mentioned in Calculate near/far plane vertices using THREE.Frustum. I used the question and the answer, https://stackoverflow.com/a/12022005/299037, to put together a complete working example, http://jsfiddle.net/cZb66/, that places particles at the bounds of the far plane, the near plane in this case is so close that the particles would obscure the view. For some reason the far plane points are not at the extents of the camera (the corners of the window) as I would have expected them to be.

hNear = 2 * Math.tan(camera.fov / 2) * camera.near; // height
wNear = hNear * camera.aspect; // width

// Far Plane dimensions
hFar = 2 * Math.tan(camera.fov / 2) * camera.far; // height
wFar = hFar * camera.aspect; // width

var farTopLeft = new THREE.Vector3( wFar / 2, hFar / 2, -camera.far );
var farBottomRight = new THREE.Vector3( -wFar / 2, -hFar / 2, -camera.far );
var farTopRight = new THREE.Vector3( -wFar / 2, hFar / 2, -camera.far );
var farBottomLeft = new THREE.Vector3( wFar / 2, -hFar / 2, -camera.far );

// adjust the vectors to the camera location and direction
camera.updateMatrixWorld();
farTopLeft.applyMatrix4( camera.matrixWorld );
farBottomRight.applyMatrix4( camera.matrixWorld );
farTopRight.applyMatrix4(camera.matrixWorld);
farBottomLeft.applyMatrix4(camera.matrixWorld);

var z = 1;
var farParticles = new THREE.Geometry();
farParticles.vertices.push(new THREE.Vector3(farTopLeft.x, farTopLeft.y, z));
farParticles.vertices.push(new THREE.Vector3(farBottomRight.x, farBottomRight.y, z));
farParticles.vertices.push(new THREE.Vector3(farTopRight.x, farTopRight.y, z));
farParticles.vertices.push(new THREE.Vector3(farBottomLeft.x, farBottomLeft.y, z));
farParticles.vertices.push(new THREE.Vector3(0, 0, 0));

Upvotes: 3

Views: 2775

Answers (1)

WestLangley
WestLangley

Reputation: 104783

You were close. camera.fov is in degrees. You needed to convert camera.fov to radians in your calculation of the visible height.

hNear = 2 * Math.tan( camera.fov * Math.PI / 180 / 2 ) * camera.near;

There were a few other errors. Here is a working fiddle:

http://jsfiddle.net/cZb66/3/

three.js r.66

Edit: Updated jsfiddle link to version with 1x1 near particles.

Upvotes: 5

Related Questions