Is there a simple and cost-effective way to determine if a point or Vector3 is within the field of view of a camera using three.js?
I would like to create a grid of boxes to cover the "floor" of a scene, but only up to the edges of the visible area, without being affected by panning or rotation. It would also be beneficial to restrict the depth at which the boxes can exist from the camera's position.
Although I haven't been able to find a definitive answer yet, I suspect it might be because I'm not using the correct terminology. Any clarification and a quick example would be greatly appreciated.
Here is a starting code snippet:
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 do I determine if the Vector3 is within the camera's view?
var renderer = new THREE.WebGLRenderer();
document.body.appendChild( renderer.domElement );
console.log('Currently, the screen is just blank.');}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>