Calculate the values for top, left, width, and height in a Three.js projection

Question

Calculate the values for top, left, width, and height in a Three.js projection

I'm currently facing an issue: I am trying to position a DIV on top of a WebGL animation. The scenario involves rotating a `mesh` using a `PlaneGeometry` to fill a rectangular area, and then placing the DIV at the top of that space. To achieve this, I need the X,Y coordinates and dimensions of the rendered plane.

My attempt with the `THREE.Projection` class did not yield the desired results, even after projecting the `[0]` vertex using `.projectVector`. The output was:

x: -0.1994540991160383
y: 0.17936202821347358
z: 0.9970982652556688

However, this information did not provide significant assistance.

javascript positioning three.js

Answer 1

Answer №1

To convert a 3D point called position to screen coordinates, with respect to the renderer's canvas, follow these steps:

var projector = new THREE.Projector();
var pos = projector.projectVector( position, camera );

var xcoord = Math.round( (pos.x + 1) * canvas.width / 2 );
var ycoord = Math.round( (-pos.y + 1) * canvas.height / 2 );

In this scenario, keep in mind that canvas refers to renderer.domElement.

If a point is located at the upper left corner of your visible world, it will project to coordinates (0, 0).

Based on three.js version r.53.

Answer 2

To convert a 3D point called position to screen coordinates, with respect to the renderer's canvas, follow these steps:

var projector = new THREE.Projector();
var pos = projector.projectVector( position, camera );

var xcoord = Math.round( (pos.x + 1) * canvas.width / 2 );
var ycoord = Math.round( (-pos.y + 1) * canvas.height / 2 );

In this scenario, keep in mind that canvas refers to renderer.domElement.

If a point is located at the upper left corner of your visible world, it will project to coordinates (0, 0).

Based on three.js version r.53.

Answer 3

Answer №2

I have discovered the solution to this problem. It turns out that the top left point is actually the 0 index of the plane's vertices, but it's important to consider the transformations that have already been applied as well.

function calculateLayer()
{
    // The function multiplyVector3 takes into account the object's coordinates after transformations.
    var topLeft = tubeCard.matrixWorld.multiplyVector3( tubeCard.geometry.vertices[0].clone() );
    // Index 24 represents the bottom right point, given that the plane has 4x4 faces
    var bottomRight = tubeCard.matrixWorld.multiplyVector3( tubeCard.geometry.vertices[24].clone() );
    return {
            topLeft: convert3Dto2D( topLeft ),
            bottomRight: convert3Dto2D( bottomRight )
        }
}

function convert3Dto2D( positionVector )
{
    var projector = new THREE.Projector();
    var pos = projector.projectVector( positionVector, camera );

    var xcoord = Math.round( (  pos.x + 1 ) * window.innerWidth  / 2 );
    var ycoord = Math.round( ( -pos.y + 1 ) * window.innerHeight / 2 );

    return { x: xcoord, y: ycoord };
}

Once the correct coordinates with transformations are obtained, the 3d to 2d conversion by WestLangley can be utilized for further processing.

Answer 4

I have discovered the solution to this problem. It turns out that the top left point is actually the 0 index of the plane's vertices, but it's important to consider the transformations that have already been applied as well.

function calculateLayer()
{
    // The function multiplyVector3 takes into account the object's coordinates after transformations.
    var topLeft = tubeCard.matrixWorld.multiplyVector3( tubeCard.geometry.vertices[0].clone() );
    // Index 24 represents the bottom right point, given that the plane has 4x4 faces
    var bottomRight = tubeCard.matrixWorld.multiplyVector3( tubeCard.geometry.vertices[24].clone() );
    return {
            topLeft: convert3Dto2D( topLeft ),
            bottomRight: convert3Dto2D( bottomRight )
        }
}

function convert3Dto2D( positionVector )
{
    var projector = new THREE.Projector();
    var pos = projector.projectVector( positionVector, camera );

    var xcoord = Math.round( (  pos.x + 1 ) * window.innerWidth  / 2 );
    var ycoord = Math.round( ( -pos.y + 1 ) * window.innerHeight / 2 );

    return { x: xcoord, y: ycoord };
}

Once the correct coordinates with transformations are obtained, the 3d to 2d conversion by WestLangley can be utilized for further processing.

Calculate the values for top, left, width, and height in a Three.js projection

Answer №1

Answer №2

Similar questions

Different ways to call an ES6 class that is bundled in the <script> tag

Utilizing JavaScript as the front-end client for a web application connected to the backend of

WordPress now features the ability to toggle both parent menu items when clicked, providing a more streamlined user experience

Ways to mix up a term while maintaining the original first and final characters intact (Javascript)

Alert message in jQuery validation for the chosen option value

Guide to customizing Highcharts for extracting targeted JSON information

Creating a basic tetrahedron shape using THREE.geometry is a straightforward process

Attempting to extract the class name of a tr tag but receiving a result of 'undefined'

I am facing an issue where the module pattern functions perfectly on JSBin, but fails to work properly

Step-by-step guide for building and populating a JavaScript Dictionary

The HTML modal window is experiencing loading issues

Executing a JavaScript function within MainPage.xaml.cs codebehind file in a Windows application

I am looking to dynamically add and remove an active link on my sidebar using JavaScript

Storing the timestamp of when a page is accessed in the database

Looking to create circular text using HTML, CSS, or JavaScript?

canvasJS: unable to load the chart

"Executing the command 'npm run dev' is successful, however, the command 'next dev' does not yield the expected result

Submission error occurs if file upload is absent

Are you interested in monitoring the website's past activity?

Show an alternative option in the dropdown menu