three.js: How can I tell if a Vector3 is within a camera's view?

Question

Using three.js, Is there a quick and inexpensive way to check if a point/Vector3 is within a camera's field of view?

I'm hoping to create a grid of boxes to fill the "floor" of a scene, but only to the edges of the visible area that will not pan or rotate (or at least the origin point of each box being in the visible area with leftovers hanging out of view). As a bonus, it may also be good to limit the depth from the camera position that boxes can "live" in.

While I'm unable to find a clear answer at this time, it may just be due to missing the correct terminology needed to find the correct answer. Clarification and a quick example is welcome.

Starter code:

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>

score 4 · Accepted Answer · edited May 23 '17 at 11:52

Take the camera frustrum as stated in this answer

then, call

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

EDIT: Full updated example based on question above:

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>

three.js: How can I tell if a Vector3 is within a camera's view?

1 Answers1