I am currently working on developing a 3D breakout game using THREE.js and WebGL rendering technology. My goal is to utilize THREE.Ray to detect collisions between the bouncing ball and the controllable platform at the bottom. However, I am encountering some difficulties.
While I have successfully cast a ray from the platform to the ball (or vice versa), the ball ends up getting stuck in the middle of the screen and is unable to be animated.
var ray = new THREE.Ray( platform.position, ball.position.subSelf( platform.position ).normalize() );
var intersects = ray.intersectObject( ball );
if ( intersects.length > 0 ) console.log(intersects[0].distance);
I have attempted to remove the subSelf and normalize() functions, but this results in the collision detection breaking.
The game and code can be accessed in the script.js file:
By opening the console, you can observe that the distance value changes as you move the panel, which is a positive sign. However, the ball is unable to move due to it being set to the same position in every frame.
The original method involved calculating the Z position of the ball and platform, checking if it's within the panel's width (x) coordinates, and changing its direction accordingly.
For ball bouncing, the X and Z coordinates are modified by a fixed amount each frame. If it exceeds a certain limit, the direction is reversed to maintain movement within the game boundaries.