three.js - check if object is still in view of the camera

Question

When working with a 2d canvas, if you want to check if something is no longer "on screen" you simply do something like this:

if( pos.x > window.innerWidth || pos.x < 0 ||
    pos.y > window.innerHeight || pos.y < 0 ) {
    // has left the screen
}

How would I check to see if something is still "on screen" ( in view of the camera ) in a three.js scene?

You could just negate the conditions in that if statement - `onScreen = !offScreen` — Conduit, Apr 20 '15 at 21:10

score 29 · Answer 1 · answered Dec 12 '16 at 04:12

Instead of check 2d canvas, you can check a 3d point is in frustum or not.

camera.updateMatrix();
camera.updateMatrixWorld();
var frustum = new THREE.Frustum();
frustum.setFromMatrix(new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));  

// Your 3d point to check
var pos = new THREE.Vector3(x, y, z);
if (frustum.containsPoint(pos)) {
    // Do something with the position...
}

score 7 · Answer 2 · answered Nov 13 '21 at 15:24

7

const frustum = new THREE.Frustum()
const matrix = new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse)
frustum.setFromProjectionMatrix(matrix)
if (!frustum.containsPoint(obj.position)) {
    console.log('Out of view')
}

Use this in a tick function so it will update you when the obj goes out of camera view.

Note: setFromMatrix() is changed to setFromProjectionMatrix() in newer versions of three.js

answered Nov 13 '21 at 15:24

raghav-wd

410
4
12

2

This is more up to date than @congle's answer. – Ben Jan 11 '22 at 19:03
1

I tried to edit the original answer accordingly, but apparently 'the edit queue is full'. StackOverflow leaves so much to be desired these days. – PeterT Jan 11 '23 at 10:50

three.js - check if object is still in view of the camera

2 Answers2

Linked