How to get object in WebGL 3d space from a mouse click coordinate

by

You’re looking for an unproject function, which converts screen coordinates into a ray cast from the camera position into the 3D world. You must then perform ray/triangle intersection tests to find the closest triangle to the camera which also intersects the ray.

I have an example of unprojecting available at jax/camera.js#L568 — but you’ll still need to implement ray/triangle intersection. I have an implementation of that at jax/triangle.js#L113.

There is a simpler and (usually) faster alternative, however, called ‘picking’. Use this if you want to select an entire object (for instance, a chess piece), and if you don’t care about where the mouse actually clicked. The WebGL way to do this is to render the entire scene in various shades of blue (the blue is a key, while red and green are used for unique IDs of the objects in the scene) to a texture, then read back a pixel from that texture. Decoding the RGB into the object’s ID will give you the object that was clicked. Again, I’ve implemented this and it’s available at jax/world.js#L82. (See also lines 146, 162, 175.)

Both approaches have pros and cons (discussed here and in some of the comments after) and you’ll need to figure out which approach best serves your needs. Picking is slower with huge scenes, but unprojecting in pure JS is extremely slow (since JS itself isn’t all that fast) so my best recommendation would be to experiment with both.

FYI, you could also look at the GLU project and unproject code, which I based my code loosely upon: http://www.opengl.org/wiki/GluProject_and_gluUnProject_code

More Related Contents:

  1. How can I detect when the mouse leaves the window?
  2. Three.js – Orthographic camera
  3. Drawing a line with three.js dynamically
  4. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  5. Thickness of lines using THREE.LineBasicMaterial
  6. Converting World coordinates to Screen coordinates in Three.js using Projection
  7. Image manipulation and texture mapping using HTML5 Canvas?
  8. Emulating palette based graphics in WebGL v.s. Canvas 2D
  9. Javascript: Capture mouse wheel event and do not scroll the page?
  10. How to stop a requestAnimationFrame recursion/loop?
  11. Three JS – Find all points where a mesh intersects a plane
  12. Three.js / WebGL – transparent planes hiding other planes behind them
  13. onMouseMove get mouse position [duplicate]
  14. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  15. Three.js Projector and Ray objects
  16. How to detect collision in three.js?
  17. How do I clean up and unload a WebGL canvas context from GPU after use?
  18. Most modern method of getting mouse position within a canvas in native JavaScript [duplicate]
  19. Saving canvas to image via canvas.toDataURL results in black rectangle
  20. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  21. How do you pack one 32 bit integers into 4, 8bit ints in GLSL / WebGL?
  22. Proper way to detect WebGL support?
  23. Antialiasing not working in Three.js
  24. Why does my canvas go blank after converting to image?
  25. How to render clipped surfaces as solid objects
  26. Three.js add an object to a group but keep global position/rotation/scale as it was
  27. Threejs: assign different colors to each vertex in a geometry
  28. Random Point on a given Sphere
  29. addEventListener to iFrame
  30. Why do shaders have to be in html file for webgl program?

Leave a Comment