THREE.js check if object is in frustum

Question

i've been tinkering around with three.js and i have a canvas i'd like to use as kind of a GUI. for that i have to check if an object is in the camera frustum.

my current code:

camera.updateMatrix(); 
camera.updateMatrixWorld(); 
        
var frustum = new THREE.Frustum();
var projScreenMatrix = new THREE.Matrix4();
projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
        
frustum.setFromProjectionMatrix( camera.projectionMatrix );
        
if(frustum.containsPoint( mesh.position )){
    //stuff happens...
};

frustum.containsPoint()keeps returning false. what am i doing wrong here?

A `Frustum` takes 6 `Plane`s as arguments, you're not providing anything. That's probably why it doesn't work. — Leeft, Jul 22 '14 at 07:10
An example of that is in this answer: http://stackoverflow.com/questions/10858599/how-to-determine-if-plane-is-in-three-js-camera-frustum — Leeft, Jul 22 '14 at 07:56

score 9 · Accepted Answer · edited Aug 09 '17 at 12:35

9

Your code is using

frustum.setFromMatrix( camera.projectionMatrix );

But that isn't the matrix you want. Instead use:

frustum.setFromMatrix( new THREE.Matrix4().multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse ) );

as answered in How to determine if plane is in Three.js camera Frustum

edited Aug 09 '17 at 12:35

larsmoa

12,604
8
62
85

answered Jul 22 '14 at 09:16

Leeft

3,827
1
17
25

score 0 · Answer 2 · answered Mar 23 '21 at 17:03

Three.js is doing view frustum Culling internally and only rendering when in camera frustum. Assuming that your Boundig Volumes are calculated correct, you can track weather a renderable Object3D is inside the camera view frustum when Object3D.onBeforeRender callback is called in your current frame

score 0 · Answer 3 · answered Sep 01 '23 at 00:32

Here is what I did to find if a mesh is in camera view (within 100ms):

mesh.onBeforeRender = function() {
    if (mesh.userData.inViewID) clearTimeout(mesh.userData.inViewID);
    mesh.userData.inViewID = setTimeout(()=>{
        mesh.userData.inView = false;
        console.log("out of view");
    }, 100);
    if (!mesh.userData.inView) { 
        mesh.userData.inView = true;
        console.log("in view");
    }
}

THREE.js check if object is in frustum

3 Answers3

Linked