Collision using raycaster on angular plane

I’m trying for this to not be a ‘low-effort’ post. I have read every forum and SO post about this and keep getting stuck.

What i’m tying to achieve: I want to implement collision detection on an angular plane.

Everything works fine when the floor is flat.

Project is based on pointerlockcontrols example which uses raycaster.

Project on GitHub - I’m sorry this is not a codepen - I don’t know why but I can’t never make them work.

Is it possible to achieve what i’m asking for using raycaster or box colliders? Or am I going to have to include a physics engine? Any attempt so far to use IF statements to offset camera of ray position or velocity has ended in either vibrating, jumping or clipping.

I think the problem comes from the moveForward function in pointerlockcontrols. It locks movement to the xz plane.

moveForward = function ( distance ) {

		// move forward parallel to the xz-plane
		// assumes camera.up is y-up

		vec.setFromMatrixColumn( camera.matrix, 0 );

		vec.crossVectors( camera.up, vec );

		camera.position.addScaledVector( vec, distance );


The best I can come up with in terms of a ‘solution’ is a little comical, but i’ll leave it here for others to chuckle at: Use a second forward firing ray, only slightly above (on the Y) where the first ray intersects. Use the forward and down ray to calculate the distance between intersections, using trigonometry to work out the angle of the ramp and…? Offset the camera Y up rotation or add an opposing velocity.y? I spent last night playing with an interactive trigonometric circle - and it appears that if I was smarter, I should be able to use sin,cos,tg and ctg to get myself up this ramp.

To be clear - i’m not looking for someone to write code for me. I’ve spent a few days writing and deleting broken solutions. I’m just looking for some perspective from someone who might be better versed in this than I.