Raycasting

Planning and Development

Raycasting has been giving me fits.  The problems I was having with raycasting are what really pushed me to switch to a perspective camera in the world editor but it turns out that wasn’t really the issue.  I’m not completely sure what was causing the problem but after a fair amount of digging I discovered that rays were always being shot just below the pointer’s location on the screen.  No matter which way the camera was oriented, rays were always just low.  I really banged my head against a wall on this one but finally figured out that the menu at the top of the editor was throwing off something.  I had the <div> containing the menu nested inside the <div> to which THREE.js adds a canvas for rendering.  This was messing up some kind of calculation and making THREE.js think the screen was shorter than reality and consistently pushing rays down.  To fix this I just moved the nav bar <div> beside the display <div> and set its location to “absolute” with CSS.  This fixed the issue with raycasting and also made the background of the menu not stretch all the way across the screen, which I kind of like, so that was a happy accident.  Now that raycasting is working again, I can work on selecting objects and improving the tools to manipulate them in a scene.

Leave a Reply

Your email address will not be published. Required fields are marked *