Transforming a 3D coordinate into a 2D screen coordinate [r69!]

Question

Transforming a 3D coordinate into a 2D screen coordinate [r69!]

I am seeking Three.js code that can convert 3D object coordinates to 2D coordinates within a 'div' element, allowing me to place text labels in the correct positions without them scaling, moving, or rotating along with the 3D movement. Unfortunately, all the examples I have attempted thus far appear to employ outdated functions and techniques. Currently, I am working with version r69 of Three.js.

One example of an 'older' technique that consistently generates errors for me can be found here:

Three.js: converting 3d position to 2d screen position

In contrast, I recently discovered a snippet of what appears to be newer code, but due to lack of context, I have not been able to make it work effectively:

https://github.com/mrdoob/three.js/issues/5533

javascript three.js 3d 2d coordinates

Answer 1

Answer №1

In my recent project, I have crafted a function that takes in an instance of THREE.Object3D and a camera as parameters to determine the position on the screen.

function toScreenPosition(obj, camera)
{
    var vector = new THREE.Vector3();

    var widthHalf = 0.5*renderer.context.canvas.width;
    var heightHalf = 0.5*renderer.context.canvas.height;

    obj.updateMatrixWorld();
    vector.setFromMatrixPosition(obj.matrixWorld);
    vector.project(camera);

    vector.x = ( vector.x * widthHalf ) + widthHalf;
    vector.y = - ( vector.y * heightHalf ) + heightHalf;

    return { 
        x: vector.x,
        y: vector.y
    };

};

Subsequently, I instantiated a THREE.Object3D solely for the purpose of storing the div's position (linked to a mesh in the scene). Whenever necessary, this object can be easily converted to a screen position utilizing the toScreenPosition function to update the coordinates of the div element.

var proj = toScreenPosition(divObj, camera);

divElem.style.left = proj.x + 'px';
divElem.style.top = proj.y + 'px';

Check out this demo on JSFiddle.

Answer 2

In my recent project, I have crafted a function that takes in an instance of THREE.Object3D and a camera as parameters to determine the position on the screen.

function toScreenPosition(obj, camera)
{
    var vector = new THREE.Vector3();

    var widthHalf = 0.5*renderer.context.canvas.width;
    var heightHalf = 0.5*renderer.context.canvas.height;

    obj.updateMatrixWorld();
    vector.setFromMatrixPosition(obj.matrixWorld);
    vector.project(camera);

    vector.x = ( vector.x * widthHalf ) + widthHalf;
    vector.y = - ( vector.y * heightHalf ) + heightHalf;

    return { 
        x: vector.x,
        y: vector.y
    };

};

Subsequently, I instantiated a THREE.Object3D solely for the purpose of storing the div's position (linked to a mesh in the scene). Whenever necessary, this object can be easily converted to a screen position utilizing the toScreenPosition function to update the coordinates of the div element.

var proj = toScreenPosition(divObj, camera);

divElem.style.left = proj.x + 'px';
divElem.style.top = proj.y + 'px';

Check out this demo on JSFiddle.

Answer 3

Answer №2

To transform a 3D position into screen coordinates, you can utilize the following method:

var point = new THREE.Vector3();
var surface = renderer.domElement;

point.set(4, 5, 6);

// convert to normalized device coordinate (NDC) space
point.project(camera);

// map to 2D screen space
point.x = Math.round((point.x + 1) * surface.width / 2);
point.y = Math.round((-point.y + 1) * surface.height / 2);
point.z = 0;

Version: three.js r.69

Answer 4

To transform a 3D position into screen coordinates, you can utilize the following method:

var point = new THREE.Vector3();
var surface = renderer.domElement;

point.set(4, 5, 6);

// convert to normalized device coordinate (NDC) space
point.project(camera);

// map to 2D screen space
point.x = Math.round((point.x + 1) * surface.width / 2);
point.y = Math.round((-point.y + 1) * surface.height / 2);
point.z = 0;

Version: three.js r.69

Answer 5

Answer №3

Here is a helpful function that I have successfully used with Three.js version 69:

function generateCoordinates(x, y, z, camera, screenWidth, screenHeight) {
        var point = new THREE.Vector3(x, y, z);
        var calculatedVector = point.project(camera);

        calculatedVector.x = (calculatedVector.x + 1) / 2 * screenWidth;
        calculatedVector.y = -(calculatedVector.y - 1) / 2 * screenHeight;

        return calculatedVector;
    }

Answer 6

Here is a helpful function that I have successfully used with Three.js version 69:

function generateCoordinates(x, y, z, camera, screenWidth, screenHeight) {
        var point = new THREE.Vector3(x, y, z);
        var calculatedVector = point.project(camera);

        calculatedVector.x = (calculatedVector.x + 1) / 2 * screenWidth;
        calculatedVector.y = -(calculatedVector.y - 1) / 2 * screenHeight;

        return calculatedVector;
    }

Answer 7

Answer №4

In response to @meirm's query, this code snippet provides additional information on how the .getContext() method is utilized in the latest version of THREE.js. It also includes adjustments for the canvas offset, which may be necessary when a canvas is nested within another user interface.

const calculateScreenPosition = function(obj, camera){
    let vector = new THREE.Vector3();
    let widthHalf = 0.5 * renderer.getContext().canvas.width;
    let heightHalf = 0.5 * renderer.getContext().canvas.height;
    obj.updateMatrixWorld();
    vector.setFromMatrixPosition(obj.matrixWorld);
    vector.project(camera);
    vector.x = (vector.x * widthHalf) + widthHalf + $(scenecanvas).offset().left;
    vector.y = -(vector.y * heightHalf) + heightHalf + $(scenecanvas).offset().top;
    return {
        x: vector.x,
        y: vector.y
    };
};

Answer 8

In response to @meirm's query, this code snippet provides additional information on how the .getContext() method is utilized in the latest version of THREE.js. It also includes adjustments for the canvas offset, which may be necessary when a canvas is nested within another user interface.

const calculateScreenPosition = function(obj, camera){
    let vector = new THREE.Vector3();
    let widthHalf = 0.5 * renderer.getContext().canvas.width;
    let heightHalf = 0.5 * renderer.getContext().canvas.height;
    obj.updateMatrixWorld();
    vector.setFromMatrixPosition(obj.matrixWorld);
    vector.project(camera);
    vector.x = (vector.x * widthHalf) + widthHalf + $(scenecanvas).offset().left;
    vector.y = -(vector.y * heightHalf) + heightHalf + $(scenecanvas).offset().top;
    return {
        x: vector.x,
        y: vector.y
    };
};

Transforming a 3D coordinate into a 2D screen coordinate [r69!]

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to generate a complete PDF of a webpage using pdfmake?

How to properly load components in React?

Executing a shell command prior to the ENTRYPOINT in the dockerfile: Tips and guidelines

AJAX-enhanced knockout for throttling updates

Initializing multiple instances of vue-chartNote: The unique text

Run JavaScript code after the completion of loading a generic handler in ASP.NET

Having trouble installing Angular 4 with npm?

Converting a JSON object to an array with the help of JavaScript

Utilize jQuery to convert text to lowercase before adding Capitalize CSS styling

Is there a way to transform these into five columns within a single row using the Material-UI Grid system?

Developing a JavaScript library that utilizes flow type annotations and provides access to various data types

One possible solution to the error of being unable to set headers after they have already been sent to the client is to ensure that the response is returned

Initiate a connection to the cloud management system

Issues with _gaq.push functionality in Google Analytics

Troubleshooting problem with Z-Index conflict in Flash animation

Steps for adding an HTML string to a div element using Ajax

Loading text with a remote web font has been successfully initiated in Fabric.js

What is the best way to send an object from the front end to the backend using res.send?

Service Worker in Workbox with Background Sync functionality

IE presenting problems with JQuery content loaded via Ajax