Guide on identifying the 3D limits of a camera's field of vision in three.js

Question

Guide on identifying the 3D limits of a camera's field of vision in three.js

I am working with a three.js scene and am interested in determining the 3D boundaries of the viewport.

Imagine a canvas that is 500px wide and 1000px tall. The camera is fixed at position { 0, 0, 100 }, looking towards the origin at { 0, 0, 0 }.

The camera's position is static and will not change.

If there is an object located at { 0, 0, 0 }, I need to be able to move it to different locations within the camera's field of view. How can I calculate the upper-left corner of the field of view, as well as the point that is 20% from the left and 10% from the top of the field of view?

Below is the camera object data:

{
    "object": {
        "uuid": "E26C5F88-CD17-45F8-A492-F3DD704949BF",
        "type": "PerspectiveCamera",
        "matrix": [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 100, 1],
        "zoom": 1,
        "fov": 50,
        "aspect": 0.625,
        "near": 0.1,
        "far": 1000
    }
}

javascript 3d three.js

Answer 1

Answer №1

To position an item 20% from the left and 10% from the top, you can achieve this with the following code:

var left = 0.2;
var top = 0.1;
var depth = 0.7; // ranging from -1 to 1, determines the object's distance from the camera, with -1 being close and 1 being farthest
object.position.set( -1 + 2 * left, 1 - 2 * top, depth ).unproject( camera );

This code transforms a position from NDC (normalized device coordinates) within the range [-1, 1] into world coordinates.

It essentially reverses the process depicted in the following image (source), converting a point in NDC back into world coordinates:

https://i.sstatic.net/AMYuu.png

For instance:

var canvas = document.getElementById('canvas');
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
var camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientWidth, 1, 1000);
var clock = new THREE.Clock();

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: '#f00', wireframe: true});
var box = new THREE.Mesh(geometry, material);

scene.add(box);

var period = 5;
  
var top = 0.3; // 30%
var left = 0.2; // 20%
var depth = 0.7;

render();

function render() {
  requestAnimationFrame(render);
  
  if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
    camera.aspect = canvas.clientWidth /  canvas.clientHeight;
    camera.updateProjectionMatrix();
  }
  
  box.position.set(-1 + 2 * left, 1 - 2 * top, depth).unproject(camera);
  box.rotation.y += clock.getDelta() * 2 * Math.PI / period;
  
  renderer.render(scene, camera);
}

html, body, canvas {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: block;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<canvas id="canvas"></canvas>

Answer 2

To position an item 20% from the left and 10% from the top, you can achieve this with the following code:

var left = 0.2;
var top = 0.1;
var depth = 0.7; // ranging from -1 to 1, determines the object's distance from the camera, with -1 being close and 1 being farthest
object.position.set( -1 + 2 * left, 1 - 2 * top, depth ).unproject( camera );

This code transforms a position from NDC (normalized device coordinates) within the range [-1, 1] into world coordinates.

It essentially reverses the process depicted in the following image (source), converting a point in NDC back into world coordinates:

https://i.sstatic.net/AMYuu.png

For instance:

var canvas = document.getElementById('canvas');
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
var camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientWidth, 1, 1000);
var clock = new THREE.Clock();

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: '#f00', wireframe: true});
var box = new THREE.Mesh(geometry, material);

scene.add(box);

var period = 5;
  
var top = 0.3; // 30%
var left = 0.2; // 20%
var depth = 0.7;

render();

function render() {
  requestAnimationFrame(render);
  
  if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
    camera.aspect = canvas.clientWidth /  canvas.clientHeight;
    camera.updateProjectionMatrix();
  }
  
  box.position.set(-1 + 2 * left, 1 - 2 * top, depth).unproject(camera);
  box.rotation.y += clock.getDelta() * 2 * Math.PI / period;
  
  renderer.render(scene, camera);
}

html, body, canvas {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: block;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<canvas id="canvas"></canvas>

Guide on identifying the 3D limits of a camera's field of vision in three.js

Answer №1

Similar questions

Error: Attempts to access the 'avatar' property of a null value result in a TypeError

Transforming multi-layered form data into a JSON array structure for seamless integration with application/json

Absence of shadow casting in ThreeJS within react-three-renderer

How to effectively trigger a function to load images in React

Creating a Paytm payment link using API in a React Native app without the need for a server

Issue Encountered While Attempting to Show a Div Element within a Function

The Jqueryui image link is not displaying the image despite no error being reported

Send various pieces of information using Jquery/Ajax

Include the document when the query results in zero documents

Sizing labels for responsive bar charts with chart.js

Wordpress-inspired navigation on the left

Utilizing the power of Material-UI with React in conjunction with Python-Django: A comprehensive

Managing headers for localhost with Access-Control-Allow-Origin

Is there a RxJS equivalent of tap that disregards notification type?

How to troubleshoot passing json data from a controller to an AngularJS directive

Modal closes automatically after being clicked twice on data-bs-dismiss

Angular form displayed on the screen

When it comes to utilizing the method ".style.something" in JavaScript

Is there a way to use JavaScript to import several custom fonts at once?

JavaScript believes that the function is not defined, despite its clear existence