Converting a 3D Position to its Corresponding 2D Screen Position in Three.js

Question

Converting a 3D Position to its Corresponding 2D Screen Position in Three.js

I'm trying to figure out how to calculate the screen position (x,y) of a 3D object with the coordinates (x, y, z). I've researched and found one solution that involves finding the projection matrix and multiplying the 3D position by it to project onto a 2D viewing surface (such as a computer screen). However, I'm unsure of how to locate this matrix in Three.js.

I attempted to use a conversion function like the one below, but it yielded incorrect results:

function Point3DToScreen2D(point3D){
            var screenX = 0;
            var screenY = 0;
            var inputX = point3D.x - camera.position.x;
            var inputY = point3D.y - camera.position.y;
            var inputZ = point3D.z - camera.position.z;
            var aspectRatio = renderer.domElement.width / renderer.domElement.height;
            screenX = inputX / (-inputZ * Math.tan(camera.fov/2));
            screenY = (inputY * aspectRatio) / (-inputZ * Math.tan(camera.fov / 2));
            screenX = screenX * renderer.domElement.width;
            screenY = renderer.domElement.height * (1-screenY);
            return {x: screenX, y: screenY};
        }

Any help would be greatly appreciated!

javascript three.js

Answer 1

Answer №1

Here is a successful function I used with Three.js version 69:

function generatePosition(xPos, yPos, zPos, cameraObj, widthVal, heightVal) {
        var point = new THREE.Vector3(xPos, yPos, zPos);
        var calculatedVector = point.project(cameraObj);

        calculatedVector.x = (calculatedVector.x + 1) / 2 * widthVal;
        calculatedVector.y = -(calculatedVector.y - 1) / 2 * heightVal;

        return calculatedVector;
    }

Answer 2

Here is a successful function I used with Three.js version 69:

function generatePosition(xPos, yPos, zPos, cameraObj, widthVal, heightVal) {
        var point = new THREE.Vector3(xPos, yPos, zPos);
        var calculatedVector = point.project(cameraObj);

        calculatedVector.x = (calculatedVector.x + 1) / 2 * widthVal;
        calculatedVector.y = -(calculatedVector.y - 1) / 2 * heightVal;

        return calculatedVector;
    }

Answer 3

Answer №2

This is the final code snippet I used to accomplish the task:

Note: The 'div' parameter represents a canvas DOM element.

function convertToScreenCoordinates(position, camera, div) {
    var pos = position.clone();
    projScreenMat = new THREE.Matrix4();
    projScreenMat.multiply(camera.projectionMatrix, camera.matrixWorldInverse);
    projScreenMat.multiplyVector3(pos);

    var offset = calculateOffset(div);

    return { 
        x: (pos.x + 1) * div.width / 2 + offset.left,
        y: (-pos.y + 1) * div.height / 2 + offset.top
    };
}

function calculateOffset(element) { 
    var pos = new Object();
    pos.left = pos.top = 0;        
    if (element.offsetParent) { 
        do { 
            pos.left += element.offsetLeft; 
            pos.top += element.offsetTop; 
        } while (element = element.offsetParent); 
    }
    return pos;
}

Answer 4

This is the final code snippet I used to accomplish the task:

Note: The 'div' parameter represents a canvas DOM element.

function convertToScreenCoordinates(position, camera, div) {
    var pos = position.clone();
    projScreenMat = new THREE.Matrix4();
    projScreenMat.multiply(camera.projectionMatrix, camera.matrixWorldInverse);
    projScreenMat.multiplyVector3(pos);

    var offset = calculateOffset(div);

    return { 
        x: (pos.x + 1) * div.width / 2 + offset.left,
        y: (-pos.y + 1) * div.height / 2 + offset.top
    };
}

function calculateOffset(element) { 
    var pos = new Object();
    pos.left = pos.top = 0;        
    if (element.offsetParent) { 
        do { 
            pos.left += element.offsetLeft; 
            pos.top += element.offsetTop; 
        } while (element = element.offsetParent); 
    }
    return pos;
}

Answer 5

Answer №3

To access more information, you can view the original content on the demonstration:

One key element to focus on is the THREE.Projector() object; this tool allows for the automation of calculations that generate rays based on the position of the mouse cursor on the screen and then project it onto the scene.

Answer 6

To access more information, you can view the original content on the demonstration:

One key element to focus on is the THREE.Projector() object; this tool allows for the automation of calculations that generate rays based on the position of the mouse cursor on the screen and then project it onto the scene.

Converting a 3D Position to its Corresponding 2D Screen Position in Three.js

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript is able to retrieve form fields on the frontend and store them as an array

JavaScript code that is condensed for efficiency without sacrificing readability and maintainability

Uploading files with jQuery using Rails and CarrierWave with Amazon S3 storage

How can I implement a promise loop in Angular that continues until it encounters a rejection?

Using React.js to add MongoDB documents into the database

Click outside to toggle dropdown and hide it

Having Trouble with the Back Button Functionality

Issue with the transparency of a model in three.js

Tips for updating a specific section of a Django webpage using AJAX

AngularJS: Enhancing User Experience by Preserving View State and Setup through Routes

The lookat() function in three.js isn't functioning according to my requirements

Ways to extract data from an array nested within a JSON object

Using ng-init to pass a JSON object

Form with several file selection points

Having trouble with Isomorphic fetch not functioning properly for external requests?

There seems to be an issue with jQuery DataTables datetime-moment's date parsing functionality, as it is not

Searching for the location of a specific item within an array using

Issue in Wordpress: ReferenceError - '$' is not defined

Yeoman Error: Issue with 'mkdir' in Javascript Execution

Is it possible that following or unfollowing a user through Ajax can result in the href attribute of other links changing? Check out the