I have been developing an app with
three.js but I have encountered this problem and I cannot seem to find any solution to it.
I want to determine which meshes are visible right now according to where the camera is currently aiming, so i can refresh my objects (data is coming from a service) or not depending on if they are being shown on the viewport.
THREE.js in CANVAS mode (I have found a solution using WebGL that says if objects are rendered or not, but i need CANVAS for this project).
I have been trying to find if
three.js sets somehow a property to indicate whether the object is visible or not (currently on the screen, not on the entire 3D world), but I can't find it. Meshes have a visible: property but it's always on true even if the camera is not aiming to that object.
This is the code you're after:
var frustum = new THREE.Frustum(); var cameraViewProjectionMatrix = new THREE.Matrix4(); // every time the camera or objects change position (or every frame) camera.updateMatrixWorld(); // make sure the camera matrix is updated camera.matrixWorldInverse.getInverse( camera.matrixWorld ); cameraViewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse ); frustum.setFromMatrix( cameraViewProjectionMatrix ); // frustum is now ready to check all the objects you need console.log( frustum.intersectsObject( object ) );
©2020 All rights reserved.