javascript - 根据当前相机确定网格在视口(viewport)上是否可见

Question

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

我在 CANVAS 模式下使用 THREE.js(我找到了一个使用 WebGL 的解决方案，说明是否渲染了对象，但我需要 CANVAS 用于此项目)。

我一直在尝试寻找 three.js 是否以某种方式设置了一个属性来指示对象是否可见(当前在屏幕上，而不是在整个 3D 世界上)，但我可以找到它。网格有一个 visible: 属性，但它始终为 true，即使相机没有瞄准那个对象。

Answer 1

这是你要的代码:

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