THREE.js check if object is in frustum

three.js frustum
Kevin Kuyl picture Kevin Kuyl · Jul 22, 2014 · Viewed 9k times · Source

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.setFromMatrix( camera.projectionMatrix );

if(frustum.containsPoint( mesh.position )){
    //stuff happens...
};

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

Answer

Leeft picture Leeft · Jul 22, 2014

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

Related questions

"Cross origin requests are only supported for HTTP." error when loading a local file

I'm trying to load a 3D model into Three.js with JSONLoader, and that 3D model is in the same directory as the entire website. I'm getting the "Cross origin requests are only supported for HTTP." error, but I don't …

Read More
Changing three.js background to transparent or other color

I've been trying to change what seems to be the default background color of my canvas from black to transparent / any other color - but no luck. My HTML: <canvas id="canvasColor"> My CSS: <style type="text/…

Read More
Rotate camera in Three.js with mouse

I have quite a few objects in my scene so rotating all of them could be a pain. So what is the most easy way to move camera around origin on mouse click and drag? This way all the lights, …

Read More