Is it possible to receive an Infinite value from the Vector.project() function in Three.js

Could someone please explain why I am getting {x:Infinity, y:-Infinity, z:-Infinity} as my position values {x:0.50516157, y:-0.62950189, z:0} when attempting to project my position vector onto the camera? I have come across a similar issue on Stack Overflow, but the provided solution did not resolve my problem. Any assistance would be greatly appreciated and save me time.

var screenvector = new THREE.Vector3();
var position = new THREE.Vector3();
position = convertLatLontoVec3(lat, lng).multiplyScalar(radius);
//convertLatLontoVec3(returns new THREE.Vector3(x, y, z);)
screenvector.copy(position);
//During debugging, I can see the values of position.x, .y, .z 
screenvector.project(camera); //However, after this step is executed, all values become infinity. I'm puzzled by this occurrence. 

Answer №1

If you find yourself projecting a vector in "screen space," chances are you're positioned right at the camera's origin in view/worldSpace, where z equals 0 on the diagram. This is where infinity comes into play and it might be necessary to consider unprojecting instead.

https://i.sstatic.net/14HeT.jpg

When starting from z equals 0, anything located behind the camera essentially equates to infinity (I believe).

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

Implementing a JavaScript function with parameters onto an element using backend code

Hey everyone, I've run into a strange issue while trying to pass string parameters to a JavaScript function from the code behind. Here is the current code snippet that I believe is causing the problem: thumbnail = "<a href = 'javascript:Remov ...

Stripping away HTML tags from a JSON output

I'm attempting to retrieve a JSON result using jQuery. $.ajax({ type: "GET", url: "http://localhost:8080/App/QueryString.jsp?Query="+query, contentType:"text/html; charset=utf-8", dataType: "json", success: function(json) { if(data!="") ...

Exploring the World of 2D Array Animation

I'm in the process of creating a Pacman ghost using visual 2D arrays. I would like the ghost to move similar to this: https://i.sstatic.net/KPmUt.gif I am considering implementing CSS transitions for the movement, but I'm unsure about how to do ...

Scheduling classes based on their index or data attributes

Here is a code snippet demonstrating the use of a variable instead of a hardcoded value: var i = 1; if ($(this).attr('data-target="1"')){} To pass the variable i instead of 1, you can modify the code like this: if ($(this).attr('data-targ ...

Preserve the variable alterations for future promises

I have implemented promises in my database access using elasticsearchjs, which utilizes Bluebird. Each ID in the list triggers a new query, and I need to identify the failing query by its ID. const idList = ['id1', 'id2', 'id3&apo ...

Neglecting to Execute Success Function After Retrieving Data from PageMethods Using Multiple Parameters in C#

I attempted to trigger my OnSuccess function, but it did not execute on the server. This is my code: function Get_Data(option , text){ //returns 'data', 'data', --not call OnSuccess-- PageMethods.BindSeries(option,text,OnSuccess); ...

Unpacking a props object results in an undefined value

I've been struggling to set up a data-grid in react because I'm facing issues with accessing the data from my props. Whenever I try to access or destructure the prop, it shows up as "undefined" in my console. This problem only arises when the p ...

Tips for animating a threeJS object with GSAP

Recently, I have been delving into learning threeJS and encountered a hurdle that I can't seem to overcome. My attempt at animating an extruded triangle using the GSAP library has hit a snag. The animation is supposed to be a simple movement of the tr ...

Fixing errors with observables in an Angular 2 project using Rx

var foo = Observable.create(function(observer){ try{ console.log('hey there'); observer.next(22); throw new Error('not good at all'); setTimeout(function(){ observe ...

The POST method functions properly in the local environment, however, it encounters a 405 (Method Not Allowed) error in the

After testing my code locally and encountering no issues, I uploaded it to Vercel only to run into the error 405 (Method Not Allowed) during the POST method. Despite checking everything thoroughly, I'm unable to find a solution on my own. Your assista ...

Upon attempting to utilize Socket.io with Next.JS custom server, the server repeatedly restarts due to the error message "address already in

Every time I attempt to execute the refreshStock() function within an API endpoint /api/seller/deactivate, I encounter the following error: Error: listen EADDRINUSE: address already in use :::3000 at Server.setupListenHandle [as _listen2] (net.js:1318: ...

Is there a more effective method for detecting changes in a class variable in JavaScript, aside from using setInterval()?

Is there a more readable way to monitor changes of a class variable from its instance? Although I can use setInterval() to achieve this, the code becomes quite difficult to read. let calibrator = new Calibrator("hardwareName"); calibrator.connect(); let ...

Guide to dynamically generating Angular watchers within a loop

I'm looking to dynamically create angular watches on one or more model attributes. I attempted the following approach: var fields = ['foo', 'bar']; for (var i=0, n=fields.length; i<n; i++) { $scope.$watch('vm.model.&ap ...

Tips for including a DOCTYPE declaration when generating an XML document with the "xmlbuilder" npm library

Is it possible to include a !DOCTYPE declaration in an XML file while using the 'xmlbuilder' package? I want to add something similar to the following: <!DOCTYPE IAD.IF.ESTATE.FORRENT SYSTEM "http://www.finn.no/dtd/IADIF-estateforrent71.dtd" ...

Learn how to organize a div element containing select options using categories such as gender and shoe size, similar to the filtering

Is there a way to sort div elements using a select menu, similar to how it is done on shopping websites? I am struggling with modifying my JS code in order to implement multiple selects. Although I believe my JS code is correct, it doesn't seem to be ...

I am configuring Jest in my Vite and TypeScript-powered React project

I am having trouble with the relative path of the file I imported in App.test.tsx. It keeps showing me this error message: Cannot find module '@/components/items/card.tsx' from 'src/__tests__/App.test.tsx' Below is the code snippet: // ...

Is there a way to keep the modal window open in React without it automatically closing?

I have been working on a modal window implementation in React. I defined a state variable called modalbool to control the visibility of the modal window. The modal window is displayed only when modalbool is set to true. Additionally, I created a parent com ...

I require assistance in developing a mouseover image link that conceals the top image and unveils a bottom image that scrolls vertically in the exact same area as the top

I am trying to achieve a similar effect as shown on: this website I require assistance in creating a mouseover image link that hides the top image and reveals a bottom image that scrolls vertically within the same space as the top image. The long vertica ...

When attempting to access the length of a JSON array, it results in undefined

I recently received a JSON encoded array from an AJAX call that looks like this: {"country":{"0":"United States of America","United States of America":{"states":{"0":"Alaska","Alaska":{"cities":["Adak","Akiachak","Akiak","Akutan","Alakanuk"]}}}}} Below ...

What is the correct method for iterating through this array of objects and eliminating those with either null or empty item.text values?

Currently, I am working with the following Array: const contactInfo = computed(() => { return [ { id: 'address', icon: 'detail/clubLocation', text: `${props.data.contactInfo.address}` ...