Converting World coordinates to Screen coordinates in Three.js using Projection

by

Try with this:

var width = 640, height = 480;
var widthHalf = width / 2, heightHalf = height / 2;

var vector = new THREE.Vector3();
var projector = new THREE.Projector();
projector.projectVector( vector.setFromMatrixPosition( object.matrixWorld ), camera );

vector.x = ( vector.x * widthHalf ) + widthHalf;
vector.y = - ( vector.y * heightHalf ) + heightHalf;

More Related Contents:

  1. Three.js – Orthographic camera
  2. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  3. Three JS – Find all points where a mesh intersects a plane
  4. Three.js Projector and Ray objects
  5. How to render clipped surfaces as solid objects
  6. Three.js add an object to a group but keep global position/rotation/scale as it was
  7. “Cross origin requests are only supported for HTTP.” error when loading a local file
  8. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  9. How to Fit Camera to Object
  10. THREE.js Ray Intersect fails by adding div
  11. THREE.js generate UV coordinate
  12. Drawing a line with three.js dynamically
  13. How to rotate a 3D object on axis three.js?
  14. Thickness of lines using THREE.LineBasicMaterial
  15. Image manipulation and texture mapping using HTML5 Canvas?
  16. Using textures in THREE.js
  17. How to stop a requestAnimationFrame recursion/loop?
  18. Three.js / WebGL – transparent planes hiding other planes behind them
  19. Is it possible to enable unbounded number of renderers in THREE.js?
  20. Rendering a transparent shell
  21. Any way to get a bounding box from a three.js Object3D?
  22. How to detect collision in three.js?
  23. Three JS Pivot point
  24. Convert 2:1 equirectangular panorama to cube map
  25. three.js transparent object occlusion
  26. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  27. Antialiasing not working in Three.js
  28. Threejs: assign different colors to each vertex in a geometry
  29. Three.js multiple materials on object loaded via OBJMTLLoader
  30. Switch threejs controls ( from TrackBall to FlyControls and vice versa)

Leave a Comment