Strange outcome received from THREE.JS - Vector3.project function

Question

Strange outcome received from THREE.JS - Vector3.project function

Currently I am working on a project in THREE.JS and I am encountering an issue with projecting a Vector3. When attempting to project the Vector3 (0,0,0), which should ideally appear at the center of my camera screen, I receive NaN as the result. Surprisingly, other Vector3s that are all visible (though visibility shouldn't impact this, right?) are returning values like NaN, 0, Infinity, and various random numbers between -1 and 0 most of the time. Below is a snippet of the code I am using:

camera.position.x=32;
camera.position.y=32;
camera.position.z=32;
camera.lookAt(new THREE.Vector3(0,0,0));
for(var x=0;x<=16;x++)
{
    for(var z=0;z<=16;z++)
    {
        var p=new THREE.Vector3(x,0,z).project(camera);
        alert(p.x+" "+p.y+" "+p.z);
        //I'm stuck here!!!
    }
}

Any help or guidance would be greatly appreciated :)

javascript vector 3d three.js 2d

Answer 1

Answer №1

Encountered an issue while using a PerspectiveCamera to compute the projected coordinates of Vector3s without utilizing a Scene or WebGLRenderer.

To resolve this, I found that by calling camera.getWorldPosition(), it refreshed the camera's world matrix and allowed point.project(camera) to function correctly as intended.

Answer 2

Encountered an issue while using a PerspectiveCamera to compute the projected coordinates of Vector3s without utilizing a Scene or WebGLRenderer.

To resolve this, I found that by calling camera.getWorldPosition(), it refreshed the camera's world matrix and allowed point.project(camera) to function correctly as intended.

Answer 3

Answer №2

When setting the camera position, it is important to use setters in newer versions such as r67. To set the position, you can do the following:

camera.position.setX( 50 );
camera.position.setY( 50 );
camera.position.setZ( 50 );

You can also set the position using a single line like this:

camera.position.set( 50, 50, 50 );

If you haven't used setters, chances are that your camera's position is at the default (0, 0, 0).

To avoid projecting a Vector from itself to itself, you can add a condition to check if the camera position is equal to the vector before executing the projection:

vector = new THREE.Vector3( x, y, z );
if( ! camera.position.equals( vector ) ){
    var p = vector.project(camera);
}

Answer 4

When setting the camera position, it is important to use setters in newer versions such as r67. To set the position, you can do the following:

camera.position.setX( 50 );
camera.position.setY( 50 );
camera.position.setZ( 50 );

You can also set the position using a single line like this:

camera.position.set( 50, 50, 50 );

If you haven't used setters, chances are that your camera's position is at the default (0, 0, 0).

To avoid projecting a Vector from itself to itself, you can add a condition to check if the camera position is equal to the vector before executing the projection:

vector = new THREE.Vector3( x, y, z );
if( ! camera.position.equals( vector ) ){
    var p = vector.project(camera);
}

Strange outcome received from THREE.JS - Vector3.project function

Answer №1

Answer №2

Similar questions

An issue has been discovered with the Search function as JavaScript's Array.filter() and .map() methods are not functioning properly, resulting in

Tips for utilizing two renderCell functions in a datagrid from Material UI without encountering duplication or repetition

Guidelines for populating data with an array

Every time I attempt to insert a background image into a div using jQuery, I am consistently faced with a 404 error message

position a div element at the bottom of its parent container

Updating an array with complex values in React using the useState hook in

Activate Button upon Textbox/Combobox/RadDatePicker Modification through JavaScript

Unexpected JSONP Parsing Issue Despite Correct JSON Data

Tips on displaying a confirmation box when the page is refreshed or closed

JavaScript: Receiving an error that function is undefined when working with data binding

Ensure that the form is validated even when setState is not executed immediately

Is there a way to incorporate my JavaScript code into my page.jsx file efficiently?

"Trouble with Custom Shader in Three.js - Not Showing Up

What is the best way to send multiple requests for the same file and retrieve the necessary response in PHP using jQuery AJAX?

Strategies for Resolving Table Alignment Problems using HTML and JavaScript

Using the TIMESTAMP data type in PostgreSQL and getting the most out of it

Top method for cycling through an Array in React

What is the best way to create a TypeScript interface or type definition for my constant variable?

Is there a way to prevent specific objects from being dropped?

Is there a term similar to "Rise above the Rest" in the world of Web Development?