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:

myGif

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