three.js：如何确定一个Vector3是否在摄像机的视野范围内？

Question

three.js：如何确定一个Vector3是否在摄像机的视野范围内？

javascriptcamerathree.js

3

使用three.js，有没有一种快速且廉价的方法来检查一个点/Vector3是否在相机视野内？

我希望创建一个盒子网格填充场景的“地面”，但只到可见区域的边缘，不会平移或旋转（或者至少每个盒子的原点位于可见区域，其余部分超出视野）。作为奖励，还可以限制从相机位置开始盒子可以“存在”的深度。

虽然目前无法找到明确的答案，但可能只是因为缺少正确的术语而无法找到正确的答案。欢迎提供澄清和快速示例。

起始代码：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var vec = new THREE.Vector3(0, 0, 10);
          
//??? How to tell if Vector3 is within camera's view?

var renderer = new THREE.WebGLRenderer();
document.body.appendChild( renderer.domElement );

console.log('Yes it is just a black/blank screen at this point.');

body { margin: 0; }
canvas { width: 100%; height: 100% }

<html>
<head>
<meta charset=utf-8>
<title>Spot the Vector</title>
</head>
<body>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.min.js"></script>
</body>
</html>

- Christopher Stevens

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vals · Accepted Answer

按照这篇回答所述，使用相机视锥体。

然后调用：

if(frustum.containsPoint( vec ))  
    { ...

编辑：以上问题的完全更新示例：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

//var vec = new THREE.Vector3(0, 0, 10); //behind camera
var vec = new THREE.Vector3(0, 0, -10); //in front of camera

//check if within camera's view:
camera.updateMatrix(); // make sure camera's local matrix is updated
camera.updateMatrixWorld(); // make sure camera's world matrix is updated
camera.matrixWorldInverse.getInverse( camera.matrixWorld );

var frustum = new THREE.Frustum();
frustum.setFromMatrix( new THREE.Matrix4().multiply( camera.projectionMatrix, camera.matrixWorldInverse ) );

if(frustum.containsPoint(vec)) {
  console.log('within camera view');
} else {
  console.log('outside camera view');
}

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

body { margin: 0; }
canvas { width: 100%; height: 100% }

<html>
  <head>
    <meta charset=utf-8>
    <title>Spot the Vector</title>
  </head>
  <body>
    <script src="https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.min.js"></script>
  </body>
</html>