Calculation of the boundaries of the camera and the far plane

Question

I am trying to perform the calculations mentioned in Compute vertex vertices / planes using THREE.Frustum . I used the question and answer https://stackoverflow.com/a/238238/ to make a complete working example, http://jsfiddle.net/cZb66/ , which places particles in the far plane, the near plane is so close in this case, that particles overshadow the view. For some reason, the far points are not in the extents of the camera (window corners), as I 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)); 

Answer 1

You were close. camera.fov is in degrees. You had to convert camera.fov to radians when calculating the apparent height.

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

There were other errors. Here is a working fiddle:

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

three.js r.66

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