Utilizing camera perspective for coordinate system in Three.js

This question may seem basic, but I'm having trouble grasping it. I'm working on a scene using Three.js and the camera setup is as follows:

var camera = new THREE.PerspectiveCamera( 85, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

Could someone please explain the range of x and y based on these values? I calculated that -8>=x>=8 and -4>=y>=4, but I'm struggling to understand how these values are determined. If you could also recommend a good article for further reading, I would appreciate it.

Thank you in advance.

Answer №1

When considering the visibility of coordinates in world space to a perspective camera, it is important to understand the inner workings of a modern 3D rendering pipeline. This process involves a series of matrix transforms that convert an object from world space to screen space.

A crucial component in this transformation is the view-projection matrix, which maps a world space coordinate [x,y,z] to "almost" screen space [x,y,z,w]. By dividing x, y, z by w, the resulting coordinates establish a system where x=-1 represents the left side of the screen and x=+1 symbolizes the right side. Similarly, y=-1 corresponds to the bottom of the screen, while y=+1 indicates the top.

The responsibility of calculating the view-projection matrix typically falls on the perspective camera. Additionally, the matrix possesses the property of being invertible, meaning it can convert screen space back to world space. Therefore, to determine the visible range of x,y coordinates, one can input [-1,-1,z] as the bottom left of the screen, apply the inverse of the view-projection matrix, and perform the necessary /w division to obtain the corresponding world coordinates for the object’s position.

In a simplified form using pseudo code:

vec3.toWorldSpace = function(out, v3, viewProjectionMatrix){
    var invViewProj = mat4.inverse(vec3._m, viewProjectionMatrix);
    var m = invViewProj;
    vec3.transformByMat(out, v3, m);
    var w = m[3] * x + m[7] * y + m[11] * z + m[15];
    if (w !== 0){
        var invW = 1.0/w;
        out[0] *= invW;
        out[1] *= invW;
        out[2] *= invW;
    }
   
    return out;
};

Answer №2

After experimenting and testing different methods, I discovered that Three.js interprets Objects.position.X as the world coordinate.

The formula I found is: Xp = X / (arZtan(angle/2))

And also: Yp = Y / (Z * tan(angle/2))

If there are any Three.js experts out there, please feel free to correct me if I'm mistaken.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fixed navigation menu at the top of the screen

Can anyone help me with my navbar issue? I want it to stay on top of the page, but there's a huge gap between the top of the page and the nav bar. I've tried running a JS file, but it doesn't seem to fix the problem. Any ideas on how to make ...

Error: The property 'case sensitive routing' cannot be accessed because it is undefined

Task at hand: Running ExpressJS port using Node.js, nodemon, and lib. Operating System: Windows 10 Home x64 Node.JS Version: Lts The Challenge: Getting the ExpressJS port to run successfully. Current Issue: Encountering an internal file error, potentiall ...

Finally, $.getJSON has been triggered

When I click on an element, I want to open a bootstrap modal. The modal contains values retrieved from an ajax call using getJSON. However, the issue is that the getJSON function is only called after the jQuery function has finished executing. Below is my ...

Utilize JavaScript to parse JSON containing multiple object settings

After receiving the server's response, I am looking to extract the "result" from the JSON data provided. This is my JSON Input: { "header":{ "type":"esummary", "version":"0.3" }, "result":{ "28885854":{ "uid":"28885854", "pub ...

When JQuery is written in a separate file, it does not get applied in the HTML file

I've encountered an issue that seems to have similarities to others, but despite trying various solutions and writing JQuery code in a JS file, I can't seem to get it to work properly. When I include the path for the JS and JQuery version in the ...

Retrieving information from MongoDB for a specific ObjectID associated with the current authenticated user

Having two collections in my MongoDB structured as follows: Data User: id: ObjectId ("5fb39e3d11eaad3e30cfb1b0") userName: "Tobias" password: "yyy" id: ObjectId ("5fb3c83fb774ff3340482250") userName: "Thor&qu ...

Avoid triggering the parent modal to close when a child element is clicked in VueJS

In my Vue application, there is a situation where I have a button called "detach button" with a @click function inside an element that is clickable. When clicking on this parent element, it triggers another @click function and toggles a Bootstrap modal eve ...

The flow of Ajax execution halts once the initial calculation is completed

I have been developing an AJAX code that calculates fees. The code works well initially, but it stops functioning when I try to perform a second operation. <script> var weight = document.getElementById("weight").value; var ship_type = document.g ...

The error message "Attempting to send a message using an undefined 'send' property in the welcomeChannel" is displayed

bot.on('guildMemberAdd', (member) => { console.log(member) const welcomeChannel = member.guild.channels.cache.find(channel => channel.name === 'welcome'); //const channelId = '789052445485563935' // welcome c ...

Unable to retrieve data from the database within PHP code

I have successfully built a shopping cart website utilizing SQL, HTML, and PHP. Below is the code snippet for the 'Add to Cart' button: <form method="post" action="cart.php" class="form-inline"> <input type="hidden" value="&apos ...

Obtaining the string representation of an HTML element's DOM in JavaScript without including its child elements

Is there a way to retrieve the HTML element/node without its children as a string? Even though this question may appear similar to another on Stack Overflow: jQuery, get html of a whole element, I'm specifically looking for just the HTML element i ...

Exploring jQuery: Techniques for Hovering, Changing, and Toggling Images

Currently, I am busy working on my project and I am attempting to achieve this by... I ideally want everything to be operational through click actions for each individual image, allowing them to have their unique "paper". I am aiming for a hover effect an ...

Why won't the code for detecting the DEL key in a textarea work on my computer?

I've been trying to detect when a user presses the Delete key and came across this helpful tutorial here The code worked flawlessly on jsfiddle.net, you can check it out here- http://jsfiddle.net. However, when I copied the same code to my local comp ...

Is there a way to automatically scroll to the last dynamically added div?

Within the chat.html file, I have included a div tag and implemented a script that dynamically adds rows to the div when a button is clicked. In another file named list.html, I have inserted an iframe tag with the src attribute pointing to chat.html. Howev ...

The @emit event in vue.js is not being received by the parent component

Within my application, there is a form located in the ManageCards component. This form includes a child component called ImageUpload, which emits an image file and its local URL to the parent component: <form class="mb-3"> <div class ...

Tips on converting a Java regular expression to JavaScript regular expression

Can someone assist me in translating the Java Regex code below to JavaScript Regex? (\\\p{Upper}{2})(\\\d{2})([\\\p{Upper}\\\p{Digit}]{1,30}+) I attempted using the following JavaScript Regex: ...

Implementing text truncation in JavaScript

I am seeking to transform the INPUT I have into a desired OUTPUT format. pieChart.js stackedColumnChart.js table.js and i want OUTPUT like that(wanna remove .js from ) pieChart stackedColumnChart table ...

Does utilizing this.someFunction.bind(this) serve a purpose or is it duplicative

As I analyze someone's code, I stumbled upon the following snippet: this.device_name.changes().onValue(this.changeName.bind(this)) My interpretation so far is that onValue requires a callback function, which in this case is this.changeName.bind(this ...

Looking for answers to a question about Handlebars in Node.js? Click on the following link to explore more

After successfully parsing my Shopify product items into a MongoDB database using a model, I am attempting to display them to the user using the express-handlebars package. However, I've encountered a small issue. I'm utilizing <td><a ...

Having trouble retrieving data from the server for the POST request

I am fairly new to using Jquery and Ajax requests. I'm currently working on a website where I have a simple form that collects an email address from users and sends it to the server. However, I'm struggling to figure out how to capture the form d ...