根据当前摄像机确定网格是否在视口上可见 [英] Determine if a mesh is visible on the viewport according to current camera

问题描述

我一直用 three.js 开发一个应用程序，但我遇到了这个问题，我似乎找不到任何解决方案。
我想根据相机当前瞄准的位置来确定哪些网格物体是可见的，所以我可以刷新我的对象（数据来自服务），或者不取决于它们是否在视口上显示。

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.

我在CANVAS模式下使用 THREE.js （我发现一个使用WebGL的解决方案，

I'm using 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).

我一直在试图找到 three.js 设置某种方式一个属性来指示对象是否可见（当前在屏幕上，而不是整个3D世界），但我找不到它。网格有一个visible：属性，但它总是在true，即使相机不瞄准那个对象。

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.

推荐答案

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 ) );

这篇关于根据当前摄像机确定网格是否在视口上可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！