CODEWITHSUNDEEP
javascriptthree.js
frank astin
frank astin

Reputation: 145

Three JS convert 3D dimensions to 2D

I would like to take the world space coordinates of a sphere to screenspace coordinates in order to get the screen space bounds, which I can then use to overlay a div.

Ideally I would like to extend this function to return the height and width of the object, as well as the x & y :

toScreenPosition : function (obj, camera) {

    var vector = new THREE.Vector3();

    var widthHalf = 0.5*world.renderer.context.canvas.width;
    var heightHalf = 0.5*world.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
    };

},

Upvotes: 0

Views: 1711

Answers (2)

Normal
Normal

Reputation: 547

You can create few THREE.Object3D and locate them in the scene in position of the border of the main object you want to project to the screen.

then you can use the method you used on the main object on the other empty objects and get the pixels position on the screen of the border of the main object.

If for example you want to know the screen coordinates of the border of a sphere that has a radius of 5:

var first = new THREE.Object3D();
var second = new THREE.Object3D();
var third = new THREE.Object3D();
var fourth = new THREE.Object3D();

first.position.set(sphere.x,sphere.y+5,sphere.z);
second.position.set(sphere.x,sphere.y-5,sphere.z);

then you can apply the function you wrote, but instead of:

obj.updateMatrixWorld();

etc...

you will do:

first.updateMatrixWorld();
second.updateMatrixWorld();

etc...

then you will have the x,y coordinates of those two objects (that are on border of the main object) on screen and you can check the height by subtracting.

Upvotes: 1

Felipe
Felipe

Reputation: 4375

I would write a function that takes as input a 3D point and returns the 2D screenpoint, like the one presented there. Then if you deal with a sphere, that would be easy: get the center of the sphere in 3D, compute the 2D point, that will be the center of the overlay div, get any 3D point on the surface of the sphere, compute the 2D point, you will know the required radius of the overlay div, from there you can easily compute a rectangular area.

Upvotes: 0

Related Questions