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));

回答1:

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.