Search code examples
three.jscamerafrustum

How to return the frustum of the THREE.Perspective camera and store it as a variable?

I was looking on Three.js API and I found that the Frustum is used for the camera visible area. I was wondering if I can access the view frustum of my PerspectiveCamera and declare the frustum as an object. Basically, my goal is to color the frustum of the camera.

Image

Solution

  • If you want to visualize the frustum of your camera, you can use a THREE.CameraHelper. It essentially does what you're describing in the question: it lets you color the frustum so you can visualize it.

    To implement it, you simply need to initiate it with your camera as a parameter, then add it to the scene:

    var camera = new THREE.PerspectiveCamera( 75, camRatio, 0.1, 1000 );
var helper = new THREE.CameraHelper( camera );
scene.add( helper );

    You can read more about it in the docs and you can see it in action on the right side of this example

    Update:

    If you want to read the data used to build the helper, you can access its .pointmap property. It's got lots of points that determine the position of the near plane (n1, n2, n3...), far plane (f1, f2, f3...), target, etc. To get better acquainted with what each key means, you can look at its constructor from line 38 to 83. The code is very well-documented in there.