Converting 3D position to 2d screen position [r69!]

by

I’ve written for my project the following function; it receives an THREE.Object3D instance and a camera as a parameters and returns the position on the screen. 

function toScreenPosition(obj, camera)
{
    var vector = new THREE.Vector3();

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

};

Then I created a THREE.Object3D just to hold the div position (it’s attached to a mesh in the scene) and when needed it can easily converted to screen position using the toScreenPosition function and it updates the coordinates of the div element.

var proj = toScreenPosition(divObj, camera);

divElem.style.left = proj.x + 'px';
divElem.style.top = proj.y + 'px';

Here a fiddle with a demo.

More Related Contents:

  1. How do I reverse-project 2D points into 3D?
  2. Three.js: Adding and Removing Children of Rotated Objects
  3. Three.js – Orthographic camera
  4. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  5. Converting World coordinates to Screen coordinates in Three.js using Projection
  6. Projecting 3D points to 2D plane [closed]
  7. Three JS – Find all points where a mesh intersects a plane
  8. 3D Line-Plane Intersection
  9. How can matplotlib 2D patches be transformed to 3D with arbitrary normals?
  10. Three.js Projector and Ray objects
  11. Move camera to fit 3D scene
  12. How to create custom 3d model in JavaFX 8?
  13. What’s the simple way to compute the diagonal length of a 3D mesh bounding box?
  14. Three.js: What Is The Exact Difference Between Lambert and Phong?
  15. How to render clipped surfaces as solid objects
  16. Three.js add an object to a group but keep global position/rotation/scale as it was
  17. Texture splatting with Three.js
  18. Uniform random (Monte-Carlo) distribution on unit sphere
  19. JavaFX 3D Transparency
  20. A simple algorithm for polygon intersection
  21. Getting View’s coordinates relative to the root layout
  22. How does the calculation of the light model work in a shader program?
  23. ggplot2 3D Bar Plot
  24. Multiple transparent textures on the same mesh face in Three.js
  25. THREE.JS: Get object size with respect to camera and object position on screen
  26. Using Matplotlib 3D axes, how to drag two axes at once
  27. Three.js – Can I ‘apply’ position, rotation, and scale to the geometry?
  28. Calculating a 2D Vector’s Cross Product
  29. Three.JS wireframe material – all polygons vs. just edges
  30. Transforming accelerometer’s data from device’s coordinates to real world coordinates

Leave a Comment