ThreeJS: How to detect if an object is rendered/visible

Question

How can I detect, as fast as possible, if a threejs object is visible for the eyes of the camera? The obj.visible attribute is a setter, so not useful. Also frustumCullum is not enough, as it only indicates if an object is out of the camera viewport. I need to know if an object is hidden behind another much larger object.

Anybody has an idea?

Cheers

Markus

This question is answered nicely by @mrdoob here: http://stackoverflow.com/questions/17624021/determine-if-a-mesh-is-visible-on-the-viewport-according-to-current-camera — lazd, Oct 24 '14 at 21:03

score 5 · Accepted Answer · edited Jun 05 '21 at 08:00

5

Maybe you could use THREE.Raycaster()?

var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
    // find the object by name? intersects[0].
    // Hidden if index > 0
}

edited Jun 05 '21 at 08:00

KetZoomer

2,701
3
15
43

answered Oct 09 '13 at 18:19

Stubbies

3,054
1
24
33

the problem is if its obj.visible = false or a parent has par.visible = false – Rooki Mar 29 '22 at 06:16

score 2 · Answer 2 · edited Apr 18 '16 at 13:42

You could use a RayCaster to shoot rays at the object you're interested in, then check the array raycaster.intersectObjects([]) returns. A quick outline might look like:

var raycaster = projector.pickingRay( objectScreenPositionVector, camera );
var intersects = raycaster.intersectObjects( ObjectsArray ); //the objects you're interested in.

intersects will be sorted by distance, nearest first.

There's lots of tutorials online for doing picking in Three, and AFAIK, it's a relatively efficient operation. I took at quick look at http://soledadpenades.com/articles/three-js-tutorials/object-picking/ to refresh my memory about the command names.

ThreeJS: How to detect if an object is rendered/visible

2 Answers2

Linked