three.js - 检查物体是不是仍在相机的视野中

Posted 2023-02-27

【中文标题】three.js - 检查物体是不是仍在相机的视野中

【英文标题】：three.js - check if object is still in view of the camerathree.js - 检查物体是否仍在相机的视野中

【发布时间】：2015-06-27 18:56:36

【问题描述】：

使用 2d 画布时，如果您想检查某些内容是否不再“在屏幕上”，您只需执行以下操作：

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

我如何检查在 three.js 场景中是否仍有“屏幕上”（在摄像头的视野中）？

【问题讨论】：

你可以否定 if 语句中的条件 - onScreen = !offScreen

您无需执行任何操作。 three.js 为您完成。

【参考方案1】：

您可以检查 3d 点是否在平截头体中，而不是检查 2d 画布。

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...

【参考方案2】：

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

在刻度函数中使用它，这样当 obj 离开相机视图时它会更新您。

注意：setFromMatrix() 在新版本的three.js 中改为setFromProjectionMatrix()

【讨论】：

这比@congle 的回答更新。