0

I work on a little project where i have to create plane with mouse detection. For moment i just make some test on a cube from a simple exemple found on the web.

The detection is good and accurate but the container has to be scaled when mouse wheel in order to make zoom.

(i also have to make a zoom on some images, the purpose is to superimpose images with some 3D forms in order to create an accurate detection on my images, these images are scaled with css transform so i guess the simple way is to do the same with the canvas container)

The problem come after scalling this canvas container (using css transform), the raycasting doesnt remain exact and i dont really know how to fix it, i tried to change some value but in a random way. I guess there is something to do with the scale factor applied on the container but i dont understand which variable i have to modify.

I will try to scale the canvas using three.js directly and following the scale that i apply on my images but i dont know if that would be easier.

Here is my test : http://pixelreseller.com/src_pixelreseller/projets/three-test/

You can see code by the code source but if you prefer that i copy/paste code here, let me know.

Georgio
  • 87
  • 18
  • A related answer is http://stackoverflow.com/questions/13542175/three-js-ray-intersect-fails-by-adding-div/13544277#13544277, which may help you. If not, then the key is to make sure the `x`, `y` coordinates passed to `projector.unprojectVector()` are always between -1 and 1. When you can figure how to do that, then your math is correct. By allowing scaling of your container, you are making things more difficult for yourself. – WestLangley Jun 02 '14 at 23:44
  • I had the same problem with upscaled objects. For my scene I just downscaled the object directly before collision detection and upscaled it again after collision test is done. But I used the camera for zooming and needed to scale because of a big range between far and near plane. Because there is no new frame rendered while calculating the collision, you won't see that the object was scaled. – mat Jun 03 '14 at 14:28
  • Ok thank you, so scalling objects directly in canvas with three.js instead of scalling the canvas itself is probably easier to handle. Difficulty will be to keep object overlaying my image correctly ... – Georgio Jun 03 '14 at 17:07

0 Answers0