CODEWITHSUNDEEP
javascriptpositioningthree.js
Tibor Szasz
Tibor Szasz

Reputation: 3227

Compute top,left,width,height in Three.js projetion

I'm struggling with a problem: I need to position a DIV over a WebGL animation. I rotate a mesh, based on a PlaneGeometry to occupy a rectangular size, then I'd like top position there the DIV, so I need to know what is the X,Y coordinate and the rendered dimensions of the plane.

enter image description here

I've tried the THREE.Projection class, but didn't help, even if I projected the [0] verticle using .projectVector. It computed:

x: -0.1994540991160383
y: 0.17936202821347358
z: 0.9970982652556688

...which was little help to me.

Upvotes: 1

Views: 1412

Answers (2)

Tibor Szasz
Tibor Szasz

Reputation: 3227

I found the solution. The top left point is indeed the 0 index of the plane's vertices, but you have to take into account the already performed transformations as well. 

function calculateLayer()
{
    // multiplyVector3 applies the performed transformations to the object's coordinates.
    var topLeft = tubeCard.matrixWorld.multiplyVector3( tubeCard.geometry.vertices[0].clone() );
    // index 24 is the bottom right, because 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 };
}

So once you have the correct coordinates, applied with the transformations, you just have to use the 3d to 2d conversion thanks to WestLangley.

Upvotes: 0

WestLangley
WestLangley

Reputation: 104793

To project a 3D point position to screen coordinates, relative to the renderer's canvas, do this:

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 );

where canvas is, in this case, renderer.domElement.

A point in the upper left corner of your visible world will project to ( 0, 0 ).

three.js r.53

Upvotes: 1

Related Questions