Mouse / Canvas X, Y to Three.js World X, Y, Z

by

You do not need to have any objects in your scene to do this.

You already know the camera position.

Using vector.unproject( camera ) you can get a ray pointing in the direction you want.

You just need to extend that ray, from the camera position, until the z-coordinate of the tip of the ray is zero.

You can do that like so:

var vec = new THREE.Vector3(); // create once and reuse
var pos = new THREE.Vector3(); // create once and reuse

vec.set(
    ( event.clientX / window.innerWidth ) * 2 - 1,
    - ( event.clientY / window.innerHeight ) * 2 + 1,
    0.5 );

vec.unproject( camera );

vec.sub( camera.position ).normalize();

var distance = - camera.position.z / vec.z;

pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );

The variable pos is the position of the point in 3D space, “under the mouse”, and in the plane z=0.

EDIT: If you need the point “under the mouse” and in the plane z = targetZ, replace the distance computation with:

var distance = ( targetZ - camera.position.z ) / vec.z;

three.js r.98

More Related Contents:

  1. How to change the zOrder of object with Threejs?
  2. Transparent objects in Threejs
  3. How does the calculation of the light model work in a shader program?
  4. Transparent objects in Three.js
  5. Three.js Collada – What’s the proper way to dispose() and release memory (garbage collection)?
  6. Display wireframe and solid color
  7. artifacts when rendering both sides of a transparent object with three.js
  8. THREE.JS: Get object size with respect to camera and object position on screen
  9. three.js – Adjusting opacity of individual particles
  10. three.js – how do I rotate a cylinder around a specific point?
  11. Three.js – Can I ‘apply’ position, rotation, and scale to the geometry?
  12. Outline object (normal scale + stencil mask) three.js
  13. How to use multiple materials in a Three.js cube?
  14. Three.js Rotate Texture
  15. How to implement a ShaderToy shader in three.js?
  16. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  17. Converting 3D position to 2d screen position [r69!]
  18. How to find the unicode of the subscript alphabet?
  19. Changing three.js background to transparent or other color
  20. Converting World coordinates to Screen coordinates in Three.js using Projection
  21. Transparent background with three.js
  22. Multiple transparent textures on the same mesh face in Three.js
  23. How do you save an image from a Three.js canvas?
  24. Find if point lies on line segment
  25. catch the click event on a specific mesh in the renderer
  26. Three.JS wireframe material – all polygons vs. just edges
  27. Checking if a point is inside a polygon
  28. Basic render 3D perspective projection onto 2D screen with camera (without opengl)
  29. How do I draw a point using Core Graphics?
  30. Three.js multiple materials on object loaded via OBJMTLLoader

Leave a Comment