javascriptthree.jsfrustum

THREE.js check if object is in frustum

I have 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();

const frustum = new THREE.Frustum();
const 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?

Solution

  • 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