Considerations on Ray Intersection (Bounce)

Hi all, Im working on a visualisation of Ray Tracing algorithm (notice that i dont implement the algorithm I just animate how it works)… I have some questions about extending a line object in a direction according to the object that would potentially hit.

Demo:

I broke down my ideas on how to implement this. However I’m unsure of which is the best to use. This is my first project with Three.js, so I want some guidance on how to achieve this easily.

Idea 1:

``````if(ray hits an object or ground) {

calculate normal of the hitted object
calculate the values required to draw a line
draw new line (p1 - p2)
}
``````

Idea 2:

``````  if(ray position.y === 0) {

calculate normal of the ground
increase number of vertices by 1, (the existing line)
continue draw the existing line (p2 - p3)
}
``````

Idea 3:

``````//Combine Ideas (either when the ray hit something and/or the ground)
``````

There is probably a lot of processes that i have definitely missed in my point of view. Please if you have any idea/guidance/relevant links/ or similar projects please let me know.

Already I have found these topics to be interesting in this case, but I don’t want to jump in without thinking all the possible aspects.

https://threejs.org/examples/#webgl_geometry_terrain_raycast

Raycasting (three.js) - YouTube (not english unfortunately)

https://threejs.org/docs/#api/en/core/Raycaster

A raycaster returns an object that also contains a normal. Having the normal, you can `.reflect()` your raycaster’s ray.

1 Like

I use Three.Line objects. Does this mean I have to change this to Three.Raycaster objects?

No, you can reflect any Vector3