Three JS convert 3D dimensions to 2D

Question

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

},

I assume you mean you want to convert a world space coordinates to screenspace coordinates in order to get the screen space bounds of the sphere? — Soviut, Jan 30 '17 at 06:38
You should update your question and title to mention those details. You'll get better traction. — Soviut, Jan 30 '17 at 08:32

Normal · Answer 1 · 2017-11-02T08:34:52.807

1

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.

edited Nov 02 '17 at 08:34

answered Jan 30 '17 at 09:33

Normal

528
4
19

I am not really following, could you provide some sample code? – frank astin Jan 30 '17 at 09:43
FYI: Object3d should be Object3D, the former will throw an error as it's not a THREE.js constructor object. – 10000RubyPools Nov 01 '17 at 00:16
Upvoted. For anyone still having trouble, it should be noted that this code will only work correctly if it is placed after your render function within your Three.js animation loop. – 10000RubyPools Nov 02 '17 at 19:38

score 0 · Answer 2 · edited May 23 '17 at 12:09

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.

Three JS convert 3D dimensions to 2D

2 Answers2