2

I'm using THREE.js to build a game.

Currently, I have an object at this position:

(-83645, 476450, 412912)

and I am trying to do click detection on this object.
However, when I use a raycaster as shown on the THREE.js example site, My rays are always skewed. If I skew all the coordinates down by a value of 100, the raycasting works perfectly.

I imagine this has something to do with either a division issue during normalization, or possibly an overflow error that is happening with some division somewhere.

For now, I'm shrinking the coordinates, however, in the long run, we'd like to have the coordinates stay the same.

Does anybody have any ideas why the large coordinates are skewing our rays? Thanks in advance!

EDIT: Here's a quick fiddle: http://jsfiddle.net/88ehm1yf/

mrK
  • 2,208
  • 4
  • 32
  • 46
  • Can you create a simple test case where we can reproduce this problem? – Blaise May 30 '15 at 09:43
  • @Blaise Absolutely, there's a fiddle attached now. – mrK May 30 '15 at 22:35
  • Your problem is answered here: http://stackoverflow.com/questions/26049182/mouse-coordinates-irrelevant-after-zooming-is-it-bug/26090323#26090323. Also, make sure you set `body { margin: 0 }`. fiddle: http://jsfiddle.net/88ehm1yf/1/ – WestLangley May 30 '15 at 23:20
  • @WestLangley Just noticed I never marked this as correct. If you submit the answer, I'll mark it off. – mrK Dec 01 '15 at 20:11
  • @WestLangley Just noticed I never marked this as correct. If you submit the answer, I'll mark it off. – mrK Dec 01 '15 at 20:11

1 Answers1

1

As explained in this answer you need to increase your camera near plane distance to avoid precision problems.

Also, in your CSS, set body { margin: 0 }, or see this answer for how to account for canvas offsets when using the Raycaster.

three.js r.73

Community
  • 1
  • 1
WestLangley
  • 102,557
  • 10
  • 276
  • 276